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?

related (and possible duplicate): https://stackoverflow.com/q/45497031/3597276 — Michael Benjamin, Mar 12 '21 at 15:46

Chris Calo · Answer 1 · 2021-03-12T14:55:28.230

2

Is using CSS grid an option for your situation?

The following seems to do what you are asking for:

<div style="
  display: grid;
  height: 150px;
  overflow: auto;
  grid-template-columns: min-content 1fr;
">
  <div style="background: red; width: 30px">1</div>
  <div style="background: yellow; height: 200px">hi</div>
</div>

edited Mar 12 '21 at 14:55

answered Mar 12 '21 at 14:52

Chris Calo

7,518
7
48
64

1

Thanks! We're unfortunately still targeting pre-grid browsers in this project, but it's great to know that at least with grid this is possible. – Marijn Mar 12 '21 at 14:55

score 2 · Accepted Answer · answered Apr 03 '21 at 23:29

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

Nice. Doesn't seem to be usable in my case because wrapping breaks everything, but still good to know. — Marijn, Apr 06 '21 at 07:58

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

2 Answers2