html - CSS Flex布局将 child 放入Flex框中

我想让一个孩子完全填充Flex布局的整个flex框。

如果我使用以下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;
 }

我得到一个充斥的中间子。高度100％似乎相对于.parent

在这里可以找到一个小提琴：

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

最佳答案

我不完全了解您想要什么，但是如果您想要的只是离开。 Subchild2为100％，并遵循父亲的身高（intermediatechild2），您必须将父亲的身高（intermediatechild2）与px相加并删除高度。孩子2。

回想一下，您必须计算父亲的身高（intermediatechild2）中的填充，因此，如果需要的话。 Subchild2的高度为200px，必须将其父亲（intermediatechild2）的高度设为240px，剩下20个填充顶部和20个填充底部的高度都超过200。

请注意，如果您希望我可以在其他时间喂他，则您的CSS代码是非标准的，因此只能在Chrome中使用=）

希望能帮助到你

这是一个示例：http://zip.net/bsmZgF