Height 100% on flexbox column child [duplicate]

by

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.

More Related Contents:

  1. Chrome / Safari not filling 100% height of flex parent
  2. Issue when centering vertically with flexbox when heights are unknown
  3. Fill remaining vertical space with CSS using display:flex
  4. Canvas is stretched when using CSS but normal with “width” / “height” properties
  5. How does flex-wrap work with align-self, align-items and align-content?
  6. Flex-box: Align last row to grid
  7. Text in a flex container doesn’t wrap in IE11
  8. How to style a select tag’s option element?
  9. How to apply specific CSS rules to Chrome only?
  10. How can I align one item right with flexbox?
  11. Is there any “font smoothing” in Google Chrome?
  12. Every item to have the same width as the widest element [duplicate]
  13. Freeze screen in chrome debugger / DevTools panel for popover inspection?
  14. less.js not working in chrome
  15. How can I make a div span multiple rows and columns in a grid?
  16. firefox overflow-y not working with nested flexbox
  17. Webkit CSS to control the box around the color in an input[type=color]?
  18. What does it mean when a CSS rule is grayed out in Chrome’s element inspector?
  19. How to specify an element after which to wrap in css flexbox? [duplicate]
  20. CSS3 Flexbox: display: box vs. flexbox vs. flex
  21. Chrome renders colours differently from Safari and Firefox
  22. Changing an input’s HTML5 placeholder color with CSS does not work on Chrome
  23. Make text height 100% of div?
  24. Set div height equal to screen size
  25. How to fix unexpected column order in bootstrap 4?
  26. How to stretch children to fill cross-axis?
  27. Do I not understand the flex-grow property?
  28. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  29. Image moves on hover when changing filter in chrome
  30. @media query not working in mobile. Works fine in Chrome

Leave a Comment