Question

我想让一个孩子填充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/

Answer 1

我不明白你想要什么，但如果你想要的只是离开。 Subchild2 100％并且跟随父亲的身高（middlechild2），你必须用px添加父亲的身高（intermediatechild2）并移除身高。的child2。

回想一下，你必须计算父亲身高（midchild2）中的填充，所以如果你愿意的话。 Subchild2的高度为200px，将不得不离开她的父亲（intermediatechild2）240px，留下20个填充顶部和20个填充底部高度超过200.

一张便条，只能在Chrome中使用，因为你的css代码是非标准的，如果你想我可以在其他时间母乳喂养=）

希望有所帮助

以下是一个例子：http://zip.net/bsmZgF

Answer 2

只需从height:100%移除.child2即可。这将为child2元素提供100％的高度，因此它将超出父元素。

应自动调整，以便flexbox和100％高度的目的是为child2提供更多高度（与父级相同）。

Answer 3

我解决了这个问题。解决方案在于停留＆＃34;显示：flex＆＃34;。一旦你开始灵活布局，你似乎无法退回到＆＃34;显示：块＆＃34; ＆＃34;身高：100％＆＃34;。

<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/

css flex布局适合儿童进入弹性框

3 个答案: