如何使嵌套的flexbox工作

Question

我有一个嵌套的flexbox设置的小例子:http://jsfiddle.net/ThomasSpiessens/MUrPj/12/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent">
        <div class="box fullSize">
            <div class="boxHeader moregreen">INNER HEADER</div>
            <div class="boxContent red">CONTENT CONTENT CONTENT</div>
            <div class="boxFooter moreblue">INNER FOOTER</div>
        </div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>

在此示例中,以下内容适用:

• CSS'box'类使用flexbox属性,只有boxContent被告知增长.有关特定的CSS属性和值,请检查小提琴.
• 'fullSize'只是将宽度和高度都设置为100%.

当您使用Firefox和Chrome检查这个小提琴时,您会得到不同的结果.在Firefox中它做了我想它必须做的事情,这是拉伸内部.boxContent.但是在Chrome中,内部.boxContent不会被拉伸.

有没有人知道如何在Chrome中制作内容？也许是一个缺少的特定webkit属性？

Answer 1

除非您需要额外的div,否则将其删除.元素的高度和沿主轴的长度(列方向)之间有时会有差异,这会引起一些混淆.基本上,它看起来比浏览器认为的更高,这就是为什么height: 100%不能像你期望的那样工作(我不确定在这种情况下哪种行为是正确的).

无论出于何种原因,将元素提升为Flex容器都可以.

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent box">
        <div class="boxHeader moregreen">INNER HEADER</div>
        <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        <div class="boxFooter moreblue">INNER FOOTER</div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>

Answer 2

此问题已与特定问题相关联:如何使弹性框中的嵌套元素填充整个高度？简短的回答是:

用于display:flex孩子并避免height:100%.这是一个关于codepen的简化示例.

CourtDemone解释得很好(更多这里):

根据flexbox规范,align-self:stretch值(flex'd元素的默认值)仅更改元素的交叉大小属性(在本例中为height)的使用值.但是,百分比是根据父级的交叉大小属性的指定值计算的,而不是它的使用值.