html - 嵌套的 Flexbox 破坏父级

Question

我一直在尝试实现一个简单的嵌套 flexbox 函数。我遇到了一个问题，我似乎可以有两个级别(垂直列 -> 水平行)，但如果我试图超出它，(垂直 -> 水平 -> 垂直)它会破坏容器高度。

我有一个托管的 CodePen here这更好地描述了我的问题。 http://codepen.io/FrederickGeek8/pen/xGoPXd

编译后的 HTML:

<div class="workspace">
  <div class="vertical">
    <div class="item">
      <div class="horizontal">
        <div style="background:pink" class="item"><a>Up</a></div>
        <div class="item">
          <div class="vertical">
            <div style="background:red" class="item"><a>Left</a></div>
            <div style="background:orange" class="item"><a>Strange</a></div>
          </div>
        </div>
        <div style="background:blue" class="item"><a>Another</a></div>
      </div>
    </div>
    <div class="item"><a>Right</a></div>
    <div style="background:green" class="item"><a>Dang</a></div>
  </div>
</div>

编译后的 CSS(在 CodePen 上自动添加前缀):

.workspace {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vertical {
  flex: 1;
  display: flex;
  flex-direction: row;
  background: grey;
  width: 100%;
  height: 100%;
}
.vertical > .item {
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: auto;
  border-left: 1px solid #181a1f;
  border-bottom: 1px solid #181a1f;
  flex-grow: 1;
}

.horizontal {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: grey;
  width: 100%;
  height: 100%;
}
.horizontal > .item {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: auto;
  border-left: 1px solid #181a1f;
  border-bottom: 1px solid #181a1f;
  flex-grow: 1;
}

PS:我将运行成品的平台是一个打包的 Chromium 实例。

Answer 1

我删除了一些不必要的 height: 100% 和 margin: auto

http://codepen.io/anon/pen/waLPzR

.workspace {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.vertical {
  flex:1;
  display: flex;
  flex-direction: row;
  background:grey;
  width:100%;
  height: 100%;

  > {
    .item {
      flex:1;
      display: flex;
      flex-direction: row;
      width:100%;
      border-left: 1px solid #181a1f;
      border-bottom: 1px solid #181a1f;
      flex-grow: 1;
    }
  }
} 
.horizontal {
  flex:1;
  display: flex;
  flex-direction: column;
  background:grey;
  width:100%;

   > {
    .item {
      flex:1;
      display: flex;
      flex-direction: column;
      width:100%;
      border-left: 1px solid #181a1f;
      border-bottom: 1px solid #181a1f;
      flex-grow: 1;
    }
  }
}