Why nested flexboxes are not working in Chrome? [duplicate] - css

Question

This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 4 years ago.
I have code with nested flexboxes: https://jsfiddle.net/tomrhodes/8pf1q706/ and I expect that "content 2" are always fills the remaining space. It works on Firefox, but it does not work in Google Chrome, why it is not working?
It is very important not to use one div element both as the item and as the parent of the flexbox, so - I have clearly separated these role.
html,
body {
height: 100%;
margin: 0;
border: solid magenta;
}
.row2 {
background: #f8f9fa;
margin-top: 20px;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}
.container {
display: flex;
display: -webkit-flex;
flex-flow: column;
-webkit-flex-flow: column;
height: 100%;
border: solid blue;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
border: solid blue;
}
.outsidebox {
display: flex;
flex-flow: column;
height: 100%;
border: solid purple;
}
.headerstyle {
flex: 0 1 auto;
border: solid green;
}
.contentstyle {
flex: 1 1 auto;
border: solid green;
}
.footerstyle {
flex: 0 1 40px;
border: solid green;
}
.wrapper {
flex: 1 1 auto;
border: solid yellow;
}
<div class="outsidebox">
<div class="box">
<div class="headerstyle">header</div>
<div class="contentstyle">
<div class="outsidebox">
<div class="headerstyle">header 2</div>
<div class="contentstyle">content 2</div>
<div class="footerstyle">footer 2</div>
</div>
</div>
<div class="footerstyle">footer</div>
</div>
</div>

Answer 1

I think this is what you are after - I have made the content style flex with a column direction and flex grow so it fills the parent container:
* {box-sizing:border-box;}
html,
body {
height: 100%;
margin: 0;
border: solid magenta;
}
.row2 {
background: #f8f9fa;
margin-top: 20px;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}
.container {
display: flex;
display: -webkit-flex;
flex-flow: column;
-webkit-flex-flow: column;
height: 100%;
border: solid blue;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
border: solid blue;
}
.outsidebox {
flex-grow:1;
display: flex;
flex-flow: column;
height: 100%;
border: solid purple;
}
.headerstyle {
flex: 0 1 auto;
border: solid green;
}
.contentstyle {
flex-grow:1;
display:flex;
flex-direction:column; /* make this flex and column */
border: solid green;
width:100%;
}
.footerstyle {
flex: 0 1 40px;
border: solid green;
}
.wrapper {
flex: 1 1 auto;
border: solid yellow;
}
<div class="outsidebox">
<div class="box">
<div class="headerstyle">header</div>
<div class="contentstyle">
<div class="outsidebox">
<div class="headerstyle">header 2</div>
<div class="contentstyle">content 2</div>
<div class="footerstyle">footer 2</div>
</div>
</div>
<div class="footerstyle">footer</div>
</div>
</div>
Or simplified:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
border: solid magenta;
}
.outsidebox {
display: flex;
flex-flow: column;
flex-grow: 1;
height: 100%;
border: solid purple;
}
.headerstyle {
flex: 0 1 auto;
border: solid green;
}
.contentstyle {
flex-grow: 1;
display: flex;
flex-direction: column;
border: solid green;
width: 100%;
}
.footerstyle {
flex: 0 1 40px;
border: solid green;
}
<div class="outsidebox">
<div class="headerstyle">header</div>
<div class="contentstyle">
<div class="outsidebox">
<div class="headerstyle">header 2</div>
<div class="contentstyle">content 2</div>
<div class="footerstyle">footer 2</div>
</div>
</div>
<div class="footerstyle">footer</div>
</div>