嵌套的flexbox(在两个维度中)

似乎不可能在框角色中使用一个DIV作为嵌套的flexbox-作为外部flexbox的项,作为内部内容的父级。应该引入另一个DIV。解决方案如下: https://jsfiddle.net/tomrhodes/8pf1q706/

<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>

CSS是:

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;
}