A CSS layout challenge from a colleague: We have two columns, longer one on left, couple of items on the left. But the designer wants right side contents to align bottom with the left one.
- 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.
Or does it?
Here is my code pen:
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 will disappear. We can’t have that.
Continuing the investigation