Height 100% on flexbox column child

Question

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?

Answer 1

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.