如何使嵌套的flexbox工作 [英] how to make nested flexboxes work

问题描述

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

I have a small example of a nested flexbox setup: 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>

在此示例中，以下内容适用：

In this example the following applies:

• CSS'box'类使用flexbox属性，其中只有boxContent被告知要增长。


• 'fullSize'只是设置宽度和高度为100％。

当您使用Firefox和Chrome检查时，会得到不同的结果。在Firefox中它做我想要它必须做的，这是伸展内部的.boxContent。然而，在Chrome中，内部的.boxContent不会被拉伸。

When you check this fiddle with Firefox and Chrome you get different results. In Firefox it does what I would suppose it has to do, which is stretching the inner .boxContent. In Chrome however, the inner .boxContent doesn't get stretched.

有人会有一个想法如何使Chrome的内容拉伸？也许一个特定的webkit属性缺少？

Would anyone have an idea how to make the content stretch in Chrome as well ? perhaps a specific webkit property that is missing ?

推荐答案

除非你需要 。有时在元素的高度和其沿着主轴（列方向）的长度之间存在差异，这在这里引起一些混乱。基本上，它看起来像，因为它比浏览器认为它更高，这就是为什么 height：100％不工作， （我不确定在这个实例中哪个行为是正确的）。

Unless you need that extra div, remove it. There is sometimes a difference between the height of an element and its length along the main axis (column orientation), which is causing some confusion here. Basically, it looks like it is taller than the browser believes it to be, which is why height: 100% doesn't work like you expect (I'm not certain which behavior is correct in this instance).

无论如何，将元素提升到 flex容器

For whatever reason, promoting the element to a flex container works.

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>

这篇关于如何使嵌套的flexbox工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！