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更高的高度（与父母相同）。