1

Please take a look at this simple example: https://jsfiddle.net/2xa8L8wL/16/

HTML

<p>A, B, C are all flex columns.</p>
<p>In Chrome, B's height is limited by its parent A.</p>
<p>In Firefox, B's height is expanded by its child C.</p>
<a>
  A (height: 100px)
  <b>
    B (height: auto)
    <c>
      C (height: 200px)
    </c>
  </b>
</a>

CSS

a, b, c {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

a {
  background-color: red;
  height: 150px;
}

b {
  background-color: orange;
  height: auto;
}

c {
  background-color: yellow;
  height: 200px;
}
  • There are three flex columns A, B, and C.
  • A is parent of B
  • B is parent of C.
  • A has height: 100px;
  • B has height: auto;
  • C has height: 200px;

Then what should be B's height?

Should B's height be bound by its parent A's height, or should B's height expand to contain C's height?

This renders differently in different browsers. Can someone who is familiar with the Flexbox spec tell me which is the correct behavior? Or neither?

haejeong87
  • 847
  • 1
  • 10
  • 20
  • 1
    This may shed some light: http://stackoverflow.com/q/33636796/3597276 – Michael Benjamin Oct 31 '16 at 22:23
  • 1
    if you reset flex-shrink value `a,b,c {flex-shrink:0}` , then it should behave the same https://jsfiddle.net/2xa8L8wL/17/ _one day, all browser will behave the same with same default values_ – G-Cyrillus Oct 31 '16 at 23:03
  • @Michael_B it is about the flex model here :) & auto is the default value of height , no need to write it unless a reset is needed. – G-Cyrillus Oct 31 '16 at 23:08
  • @GCyrillus So are you suggesting that what we see after setting flex-shrink:0 should be the correct way to render the boxes? – haejeong87 Nov 03 '16 at 01:09
  • @GCyrillus According to http://www.w3schools.com/cssref/css3_pr_flex-shrink.asp default value for flex-shrink is 1, not 0. – haejeong87 Nov 03 '16 at 01:11
  • 1
    @haejeong87 you should not trust that site so much (but here it is also what W3C, the officiel reference , says ) these are recommandations and doesn't mean that each browsers follows it ... – G-Cyrillus Nov 03 '16 at 06:49

0 Answers0