Why nested flexboxes are not working in Chrome?

Question

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>

Just needed a couple of adjustments. Explained in the duplicate. https://jsfiddle.net/8pf1q706/39/ — Michael Benjamin, Aug 09 '18 at 16:47

Pete · Accepted Answer · 2018-08-09T14:20:26.717

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>

Why nested flexboxes are not working in Chrome?

1 Answers1