In CSS flexbox layout, is there a way to lock child block height to parent (scroll) height if parent is vertically scrollable?

Question

If I have an HTML structure like this:

<div style="display: flex; align-items: stretch; height: 150px; overflow: auto">
  <div style="background: red; width: 30px"></div>
  <div style="background: yellow; flex-grow: 2; height: 200px"></div>
</div>

The align-items: stretch will set the first child's height to the innerHeight of the flex element, not its actual scrollable height. So when you scroll down, the red background stops at the bottom of the initial viewport.

height: 100% has a similar problem (height is relative to parent's outer size).

It is possible to solve this by introducing another wrapping element, and moving the overflow and height styles to that, but that is awkward for other reasons in my situation. Is there any way to make all flex children the same (full) height without doing that?

Answer 1

You can make use flex wrap, but it will cause wrapping obviously. Depending on your use case, you may or may not find it easier to work around that in some other way.

<div style="display: flex; flex-wrap: wrap; align-items: stretch; height: 150px; overflow: auto">
  <div style="background: red; width: 30px"></div>
  <div style="background: yellow; flex-grow: 2; height: 200px"></div>
</div>

The gist of this change is that, for a non-wrapping flex line, the line's height is given by the height of the parent element (150px in your example), but for a wrapping flex line, the heights of the child elements are considered (200px here).

per: https://bugzilla.mozilla.org/show_bug.cgi?id=1267060