嵌套Flexbox打破父

我一直在试图实现一个简单的嵌套Flexbox功能。我遇到了一个问题，看起来我可以有两个级别（垂直列 - >水平行），但是如果我尝试超出这个范围（垂直 - >水平 - >垂直），它会打破容器高度。嵌套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（autoprefixed上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：我将上运行的成品该平台是一个打包的铬实例。

来源

2015-08-20 FrederickGeek8

是我，或者是你的'柔性direction'声明倒退？ http://codepen.io/anon/pen/vOqWKp – isherwood

只是好奇预期的结果是什么？但它看起来像@isherwood钉了它。 –

我明白你在说什么，但现在的实施是正确的。 '.vertical'为列定义了一个容器，但是列将在一行中组织。我的Codepen上的内容看起来是正确的，但如果向下滚动，则会看到列（'.vertical'）突破其容器。 http://i.imgur.com/iDcAZlO.jpg – FrederickGeek8

我去掉了一些不必要的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; 
    } 
    } 
}

来源

2015-08-20 20:30:13 bumpy

嵌套Flexbox打破父

回答

相关问题