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

嵌套Flexbox打破父

1 个答案: