Found an interesting feature of Flexbox: in most browsers, you can omit the height of elements in a horizontal flexbox. In the following example, section height set, but the div stretched vertically to its full height in IE11, Edge, Chrome, and FF. Although it does not work in iOS 9 Safari.

https://jsfiddle.net/qy6thr1s/

 html, body { height: 100%; margin: 0; } body { display: flex; } section:first-child { flex-grow: 1; background: silver; } div { height: 100%; background: antiquewhite; } 
 <section><div>123</div></section> <section>456</section>

However, if you make flex vertical, it stops working - and this is a well-known fact that is repaired with absolute positioning.

https://jsfiddle.net/qy6thr1s/1/

 html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; } section:first-child { flex-grow: 1; background: silver; } div { height: 100%; background: antiquewhite; } 
 <section><div>123</div></section> <section>456</section>

Interestingly, the first option with added flex-wrap continues to work:

https://jsfiddle.net/qy6thr1s/2/

 html, body { height: 100%; margin: 0; } body { display: flex; flex-wrap: wrap; } section:first-child { flex-grow: 1; background: silver; } div { height: 100%; background: antiquewhite; } section:last-of-type { width: 100%; background: blue; opacity: .5; } 
 <section><div>123</div></section> <section>456</section> <section>890</section>

So in what cases can you not prescribe height and how cross-browser is it?

    1 answer 1

    Nb. The answer does not pretend to academic accuracy.

    Switching the flex-direction between column and row we switch the main axis, respectively, attention to content also switches from width to height . Immediately give an example:

     html { height: 100%; } body { display: flex; height: 100%; } section { background-color: lightblue; } section:first-child div { background-color: red; } div { width: 100%; /* явно зададим ширину для иллюстрации */ height: 100%; /* и высоту тоже */ } 
     <section><div>123</div></section> <section>456</section>

    Here, a width of 100% does not apply.

    Now we just change the flex-direction :

     html { height: 100%; } body { display: flex; flex-direction: column; height: 100%; } section { background-color: lightblue; } section:first-child div { background-color: red; } div { width: 100%; /* явно зададим ширину для иллюстрации */ height: 100%; /* и высоту тоже */ } 
     <section><div>123</div></section> <section>456</section>

    Now you can see the opposite result: 100% content width has been applied, but 100% height is not.

    However, this is how we change only the behavior of flexbox, the behavior of the diva itself does not change - it still follows the rules of the block formatting context, namely, it takes up all the available space in width and minimal in height.

    Now I will try to answer the question itself. When changing the main axis from X to Y, the flexbox has lost its binding to the height defined in its properties, which means that the internal marvel has nothing to refer to if you give it height: 100% . This can be solved by determining the height of the immediate descendant using flex-basis or height .

     html { height: 100%; } body { display: flex; flex-direction: column; height: 100%; } section { background-color: lightblue; flex-basis: 100%; /* height: 50%; */ } section:first-child div { background-color: red; } div { width: 100%; /* явно зададим ширину для иллюстрации */ height: 100%; /* и высоту тоже */ } 
     <section><div>123</div></section> <section>456</section>

    The flex-wrap: wrap property value does not affect the size calculation, since the main axis does not change.

    Sources:

    https://www.w3.org/TR/css-sizing-3/

    https://www.w3.org/TR/css-flexbox-1/

    • Look at the third example - it will work 100% completely differently from how it works with unspecified. - Qwertiy ♦
    • Yes, and it is natural, what is wrong here? flex-wrap moves elements, they begin to occupy a proportional height of 100% (in this case 50% each). Diva with given 100% of height occupies all available height as before. - Sasha Omelchenko
    • @Qwertiy so does this answer your question? - Sasha Omelchenko
    • Um ... I would like to be specific and straight with links to the places of specification ... - Qwertiy ♦