103

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?

CourtDemone
  • 5,772
  • 6
  • 23
  • 25

1 Answers1

132

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.

Community
  • 1
  • 1
CourtDemone
  • 5,772
  • 6
  • 23
  • 25
  • 8
    What happens If the structure is deeply nested, would one have to keep applying — `display:flex` till the very end? – tusharmath Jan 11 '16 at 14:35
  • @Tushar My guess is yes, though I wouldn't know without digging into it. It's also possible that current specs for flexbox or implementations on Chrome account for this issue, since this answer was posted when flexbox was still relatively new. – CourtDemone Jan 17 '16 at 21:04
  • I've read the spec, and it seems that the chrome team are just taking a different interpretation of a paragraph then I would have. I'm not sure the spec needs to change so much as needs to be clarify to remove the possibility of this problematic interpretation. – WraithKenny Apr 21 '16 at 15:36
  • 1
    I wanted to add that setting the `flex-basis: 1px` or `flex: 1 1 1px` on the `.flex` allows you to use `height: 100%` on `.flex-child`. Now what might be the better choice - `display: flex` or `flex-basis: 1px`? – Qwerty Nov 22 '17 at 10:16
  • Fails when the inner content of `.flex-child` is taller than its *height*. This solution is not recommended – vsync Feb 13 '22 at 16:33