A scrolling flexbox list works as expected, but then fails on a small change

[vsajip]

I want to achieve the effect of a list which has a header and footer, where the list content scrolls between the header and footer and takes up all the available space. I achieved this using the following setup:

https://codepen.io/vsajip/pen/KZypee?editors=1100

However, if I uncomment the outer div and the #description div, the whole thing doesn’t fit in the window any more, but overflows vertically. I don’t understand this, because, in the changed version,

• The outer div has style="height: 100%; margin: 0; display: flex; flex-direction: column" and show should occupy all the vertical space, and
• The #list-row div has style="flex: 1" so it should occupy all the vertical space except that taken up by the #description div.

Can anyone help explain why the uncommented version doesn’t work?

[vsajip]

Apologies for not embedding the pen, just copy/pasting the “Embed” code for WordPress from the CodePen site doesn’t appear to embed, and this is my first post so I’m not yet sure how to embed pens here.

[Paulie_D]

You needed, I think to apply flexbox to the extra wrapper.

Something like this:

https://codepen.io/Paulie-D/pen/baYgvQ

[vsajip]

Thanks, but your change, while working in Chrome, fails on Firefox. My original version (with the outer wrapper commented out) works on both Chrome and Firefox.

[vsajip]

I made slight variant of the original pen, forked here:

https://codepen.io/vsajip/pen/aEVLMe

In this, the outer wrapper also has display: flex. It works as given, but if you uncomment out the div#description, the whole list no longer remains in the window. I can’t see why this is, as the div#list-row should just occupy the remaining vertical space in the window after the vertical space taken up by div#description has been accounted for.

[vsajip]

N.B. To clarify my last reply, the failure happens on Firefox, though not on Chrome.

[Author]

Posts