In a 3-row layout:
- the top row should be sized according to its contents
- the bottom row should have a fixed height in pixels
- the middle row should expand to fill the container
The problem is that as the main content expands, it squishes the header and footer rows:
section { display: flex; flex-flow: column; align-items: stretch; height: 300px;}header { flex: 0 1 auto; background: tomato;}div { flex: 1 1 auto; background: gold; overflow: auto;}footer { flex: 0 1 60px; background: lightgreen; /* fixes the footer: min-height: 60px; */}<section><header> header: sized to content<br>(but is it really?)</header><div> main content: fills remaining space<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br><!-- uncomment to see it break - -> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br><!-- --></div><footer> footer: fixed height in px</footer></section>Fiddle:
- http://jsfiddle.net/7yLFL/1/ (working, with small content)
- http://jsfiddle.net/7yLFL/ (broken, with larger content)
I'm in the lucky situation that I can use the latest and greatest in CSS, disregarding legacy browsers. I thought I could use the flex layout to finally get rid of the old table-based layouts. For some reason, it's not doing what I want...
For the record, there are many related questions on SO about "filling the remaining height", but nothing that solves the problem I'm having with flex. Refs:
- Make a div fill the height of the remaining screen space
- Fill remaining vertical space - only CSS
- Have a div to fill out the remaining height/width of a container when sharing it with another div?
- Make nested div stretch to 100% of remaining container div height
- How can I make my flexbox layout take 100% vertical space?
- etc