1

when there is flexbox with direction column, and it has item inside, which has grow set to 1 and there is another div inside with height set to 100%, then div does not grow to size of flexbox item when it has basis set to auto. This happens only in Chrome. When basis is 0 then everything works. Why is this happening?

.body {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.outer {
  flex: 1 0 auto;
}

.inner {
  height: 100%;
  background-color: RED;
}
<div class="body">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>
Rainbow
  • 6,772
  • 3
  • 11
  • 28
KKeff
  • 348
  • 3
  • 12
  • 1
    `.inner` will take the height property of the parent (outer) which has no height set. if you put `.height: 100%;` on `.outer` it will solve your problem – philr Dec 20 '18 at 14:56
  • @philr try running the code in firefox. – Rainbow Dec 20 '18 at 14:57
  • yet another unpredictable behavior of percentage – Temani Afif Dec 20 '18 at 14:59
  • @ZohirSalak seems to work... https://jsfiddle.net/j3srun24/1/ tested in IE11 too and it works – philr Dec 20 '18 at 14:59
  • @philr no try running the op's code in firefox without any modification. – Rainbow Dec 20 '18 at 15:01
  • seems like a bug, since it only does this in the columns direction. – Rainbow Dec 20 '18 at 15:11
  • @philr outer can be just one of many flex items, i would expect it to grow and then its children to fill the space. BTW I can set basis to '0px' instead of auto and it will work just fine. – KKeff Dec 20 '18 at 15:17
  • 1
    This is an old and well-documented behavioral difference between Chrome / Safari and FF / Edge browsers. It's so well-established that it could be called "normal" or "standard" behavior. Chrome & Safari need a defined height on a parent in order for a percentage height to work on the child. `auto` won't cut it. This is the traditional interpretation of the spec. FF & Edge have adjusted for more common uses. See the duplicate post for more details. – Michael Benjamin Dec 20 '18 at 16:10

0 Answers0