嵌套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打破父

回答

相關問題