如何制作flex-items块元素？

Question

Flex-box规范3指出flex-items不是块容器：

  

弹性项为其内容建立新的格式化上下文。该   此格式化上下文的类型由其“显示”值确定，   照常。 Flex项的计算“显示”由下式确定   在CSS 2.1第9.7章中应用该表。但是，flex项目是   灵活级别的盒子，而不是块级盒子：他们参与他们的   容器的flex格式化上下文，而不是块格式   上下文。

看看这个小例子（小提琴：4）：

#flex {
    height: 200px;
    width: 100px;
    display: flex;
    flex-flow: column;
    background-color: red;
}
#flexAuto {
    display: block;
    position: relative;
    flex: auto;
    width: 100%;
}
#oneHundredPercent {
    height: 100%;
    width: 100%;
    background-color: green;
}

HTML

<div id="flex">
    <div id="flexAuto">
        <div id="oneHundredPercent"></div>
    </div>
</div>

我希望#oneHundredPercent高200像素，就像它的容器#flexAuto的大小一样。但它高出0px。实际输出看起来像左图。我期待正确的图片：

是否有一种简单的方法可以让flex-item再次像一个盒子一样？

Answer 1

好吧，我想外部弹性框的子弹通常是一个弹性项目，直到你将它的显示模式改为阻挡。

因此，您只需要明确说明FlexAuto的高度（height:100%）。高度将相对于Flexbox容器计算。

然后最内层的元素将按照您的意图显示。

（顺便说一句，即使flexAuto仍然是一个弹性项目，你可能还需要设置flex：“拉伸”。）

http://jsfiddle.net/dfrWd/6/