html - css flex layout 使子元素适合 flex box

Question

我想让一个 child 完全填满 flex 布局的整个 flexbox 。

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

我得到了一个溢出的中间 child 。高度100%好像是相对于.parent

fiddle 可以在这里找到:

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

Answer 1

我不明白你到底想要什么，但如果你想要的只是离开。 Subchild2 100% 并跟随父亲的高度 (intermediatechild2)，您必须将父亲的高度 (intermediatechild2) 添加 px 并删除高度。 child 2。

回想一下，你必须计算父亲高度 (intermediatechild2) 的填充数，所以如果你想的话。 subchild2 有 200px 的高度，将不得不离开她的父亲 (intermediatechild2) 有 240px，留下 20 padding-top 和 20 padding-bottom 高度超过 200。

请注意，由于您的 css 代码不标准，因此只能在 chrome 中使用，如果您愿意，我可以在其他时间给他喂奶 =)

希望对你有帮助

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