css柔性佈局適合兒童進入柔性盒

Question

我想讓孩子填充柔性佈局的整個柔性盒。

如果我用下面的HTML：

<div class="parent"> 
    <div class="child1"> 
     should have 100px height 
    </div> 
    <div class="child2"> 
     <div class="intermediatechild2"> 
      <div class="subchild2">should have 200px height and padding</div> 
     </div> 
    </div> 
</div> 

，並應用下面的CSS：

.parent { 
    display: flex; 
    flex-direction : column; 
    height: 300px; 
    width: 200px; 
} 

.child1 { 
    height: 100px; 
    background: #008800; 
    flex: 0 0 auto; 
} 

.child2 { 
    height: 100%; 
    background: #003300; 
    flex: 0 0 auto; 
} 

.subchild2 { 
    height : 100%; 
    background: #ff0000; 
} 

.intermediatechild2 { 
    padding: 20px; 
    height : 100%; 
    width : 100%; 
    box-sizing: border-box; 
    border: 2px solid blue; 
} 

我得到一個滿溢intermediatechild。高度100％似乎是相對於.parent

小提琴可以在這裏找到：

http://jsfiddle.net/8znFV/4/

Answer 1

我解決了這個問題。解決方案在於保持「display：flex」。一旦你開始彈性佈局，你似乎無法退回到「顯示：塊」與「身高：100％」。

<div class="parent"> 
    <div class="child1"> 
     should have 100px height 
    </div> 
    <div class="child2"> 
     <div class="intermediatechild2"> 
      <div class="subchild2">should have 200px height including padding</div> 
     </div> 
    </div> 
</div> 

CSS：

.parent { 
    display: flex; 
    flex-direction : column; 
    height: 300px; 
    width: 200px; 
} 

.child1 { 
    height: 100px; 
    background: #008800; 
} 

.child2 { 
    background: #003300; 
    flex: 1; 
    display: flex; 
} 

.subchild2 { 
    background: #ff0000; 
    flex: 1; 
} 

.intermediatechild2 { 
    padding: 20px; 
    display : flex; 
    box-sizing: border-box; 
    border: 2px solid blue; 
} 

工作小提琴：http://jsfiddle.net/8znFV/6/

Answer 2

我沒有完全理解你想要什麼，但如果你想要的是隻有離開。 Subchild2 100％，並按照父親的身高（intermediateChild2），您必須使用px添加父親的身高（intermediateChild2）並移除身高。的child2。

回想一下，你必須計算父親高度的填充（intermediatechild2），所以如果你想。 Subchild2的高度爲200像素，將不得不離開她的父親（intermediatechild2），使用240px，留下20個填充頂部和20個填充底部高度超過200.

注意，只能在chrome中工作，因爲您的css代碼是非標準的，如果你想我可以在其他時間進行母乳餵養他=）

希望它可以幫助

下面是一個例子：http://zip.net/bsmZgF

Answer 3

只需取下.child2height:100%，它會工作。這會給child2元素100％的高度，所以它會超出父級。

它應該是自動調整，這是flexbox的目的，100％高度給child2更高的高度（與父母相同）。