让 % 为 flex 项目的 child 个元素正常工作

Question

Flex-items 不允许 % 单位用于其 child 元素，除非 flex-item 具有设置的高度；然而，通常使用 flexbox 的原因是显式设置高度会很困难。是否有某种技巧可以使 flex-item 的高度和宽度可供 CSS %?

使用

例子在这里：http://jsfiddle.net/0bpr07cz/

HTML:

<div class="flex-container">
    <div class="flex-item">
        <div class="test-element"></div>
    </div>
    <div class="flex-item"></div>
</div>

CSS:

.flex-container {
display: flex;
width: 400px;
height: 400px;
background-color: pink;
}
.flex-item {
flex-grow: 1;
background-color: yellow;
}
.test-element {
height: 100%;
background-color: green;
}

如何使包含 test-element 的 flex-item 的高度可供 test-element 的 "height: 100%" 使用？我需要一个假设 flex-item 的高度未知的解决方案。

编辑：我应该提到 flex-item 的 child 是别人制作的小部件，因此更改 child 上的 css 不是最优解。

Answer 1

Example Fiddle

你想在这里混合两种风格。为什么不继续“在 Flex 中思考”而只是嵌套您的 Flex 项目？

你的新 CSS

.flex-container {
    display: flex;
    width: 400px;
    height: 400px;
    background-color: pink;
}

.flex-item {
    flex-grow: 1;
    background-color: yellow;
    display: flex;
}

.test-element {
    background-color: green;
    flex-grow: 1;
}

让 % 为 flex 项目的 child 个元素正常工作

Get % to work correctly for child elements of flex items

html

css

flexbox

Example Fiddle