UPDATE: March 20, 2015. The answer is using vh to set the height and min-height.
A CSS layout challenge from a colleague: We have two columns, longer (taller)
div on left, couple of
divs on the right. But the designer wants right side contents to align bottom with the left
- Cross browser responsive website. Modern browsers, plus graceful fall back (“can read content”) to IE 8.
- Right side contents, while most likely be shorter than left, can be any height. But must show the contents/not hide.
- Do it with CSS, and (try) not use JS
- As this will be part of template, make it as flexible/extensible as possible.
“Sure, you can do that” I said, “You can use the flexbox.. Every modern browser supports that. Even IE!”
Or does it?
Here is my code pen:
See the Pen Flexbox justify-content by Daigo Fujiwara (@daigofuji) on CodePen.
What I found was not pretty. But here are my findings.
Mac Chrome (Version 37.0.2062.94)
Mac Firefox (Version 31.0)
Mac Safari (Version 7.0.6)
Windows Chrome (Version 126.96.36.199)
Windows Firefox (Version 31.0)
Windows IE11 (Version 11.0.9600.17239)
What happened there? After playing around with IE’s inspector, it seems the issue is with “min-height” rather than the flexbox itself.
So, if you give, say, a
height: 1px; in the .flex-container-column, it works (then the height will be min-height). However, height of 100%, or height of auto will not. Mmmm.
So, I tried old trick featured on Chris Coyers site (Love CSS-Tricks!), but since it defaults to auto, it still doesn’t work.
Setting height would work, for example in the pen above, if you comment out line 14 in css (
height: 250px;), flex would behave as expected. But since now the height is set, and not flexible, say if the right-one
div had a height of 300px, right-two
div will disappear. We can’t have that.
Continuing the investigation