css – 如何使嵌套的flexbox工作

我有一个嵌套的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’类使用只有BoxContent被增加的flexBox 属性.对于特定的CSS属性和值,请检查小提琴.
”fullSize’只将width和height设置为100％.

当您使用Firefox和Chrome检查此小提琴时,您会得到不同的结果.在Firefox中,我会假定它必须做,这是拉伸内部的.BoxContent.然而在Chrome中,内部的.BoxContent没有被拉伸.

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

解决方法

除非你需要额外的div,否则删除它.元素的高度和沿主轴的长度(列方向)之间有时会有所不同,这在这里引起了一些混乱.基本上看起来,它比浏览器相信它高,这就是为什么高度：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>

原文链接：https://www.f2er.com/css/216497.html

css – 如何使嵌套的flexbox工作

解决方法

猜你在找的CSS相关文章