Height 100% on flexbox column child
css, flexbox, google-chrome, height, percentage
Solution
TL;DR: Set `.flex` to `display:flex`, and get rid of the `height:100%` on `.flex-child`. You can see the modified CodePen here.
Why it works:
I learned from this similar question that, according to the flexbox spec, an `align-self:stretch` value (the default for a flex'd element) changes only the used value of an element's cross-size property (in this case, `height`). Percentages however are calculated from the specified value of the parent's cross-size property, not it's used value. If you ever crack open your Inspector and see `height:100%` under 'Styles' but `height:1200px` under 'Computed', then that's showing you the specified and used values respectively.
It seems that Chrome follows the spec to the tee in this respect. That means that setting `height:100%` on `.flex-child` means 100% of the specified `height` of `.flex`. Since we haven't specified a `height` on `.flex`, that means we're grabbing 100% of the default `height`, which is `auto`. See why the layout engine is getting confused?
Setting `.flex` to `display:flex` and removing the `height:100%` from `.flex-child` (so that it doesn't keep trying to set 100% of `auto`) will make `.flex-child` fill all of `.flex`
When this won't work:
This won't work if you're trying to fill only some of `.flex`, ex. trying to set `.flex-child` to `height:90%`, because flexing the child means that it'll fill all the available space. I thought you might be able to hack it with absolute positioning, but that doesn't seem to work either. You could hack by adding a second child to `.flex` that we'll call `.spacer`, and setting `.spacer` to `flex:1` and `.flex-child` to `flex:9` (be sure to set `flex-direction:column` on `.flex` too). A hack, but the only way I could fix it. Here's the CodePen.
Hopefully we don't have to keep relying on this though and they'll just change the spec to act more as expected.
Problem
I'm having troubles with a flexbox column in that children of the flex'd element don't respond to `height` in percentages. I've only checked this in Chrome, and from what I understand it's a Chrome only problem. Here's my example: HTML ``` <div class='flexbox'> <div class='flex'> <div class='flex-child'></div> </div> <div class='static'></div> </div> ``` CSS ``` .flexbox{ position:absolute; background:black; width:100%; height:100%; display: flex; flex-direction:column; } .flex{ background:blue; flex:1; } .flex-child{ background:red; height:100%; width:100%; display:block; } .static{ background:green; width:100%; height:5rem; } ``` Here's the CodePen. I want it so the red `.flex-child` fills the blue `.flex`. Why doesn't `height:100%` work?