CSS3 Flexible Box Layout (latest) Maximum Height

Question

I'm using the latest flexible box spec (currently only supported by the latest Chrome as far as I know) and am trying to stop the flex items from exceeding a maximum height.

Best explained with an example: http://jsbin.com/efedof/2/edit

The first examples .content (plus the two .bar elements) does not exceed the height of 300px, so is correct. But with the second example the text pushes the bottom of .content down, outside of the .box div.

How do I enforce a maximum total height of the three combined flex items, so that the .content area becomes scrollable instead of stretching outside of the .box and pushing the .bar out of the .box?

Thanks.

Will "latest" have the same meaning six months from now? Better to be specific. — Diodeus - James MacFarlane, Nov 14 '12 at 19:50
Well it's reached Candidate Recommendation, so I imagine so. But, there are two older specs, and it gets confusing, so fair point: http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/ — Jack Sleight, Nov 14 '12 at 20:41

score 5 · Answer 1 · edited May 23 '17 at 10:29

5

Found the answer!. Trick is to add min-height: 0; to the .content div.

edited May 23 '17 at 10:29

Community

1
1

answered Nov 14 '12 at 21:17

Jack Sleight

17,010
6
41
55

Suprisingly, Chrome v38.0 displays the boxes OK without `min-height:0`, but FF v33 overflows the content in bottom box. Do you have the same effect? – dma_k Oct 20 '14 at 15:12
Your solution worked for me on Firefox as well. Is it a bug from Firefox ? – Valentin Perrelle Jun 03 '16 at 21:14

CSS3 Flexible Box Layout (latest) Maximum Height

1 Answers1