让 % 为弹性项目的子元素正常工作

Question

弹性项目不允许 % 单位为其子元素工作，除非弹性项目具有设定的高度；然而，通常使用 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;
}

如何使包含测试元素的弹性项目的高度可以被测试元素的“高度：100%”使用？我需要一个假设 flex-item 的高度未知的解决方案。

编辑：我应该提到 flex-item 的子项是其他人制作的小部件，因此更改子项的 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;
}