获取％以正确处理弹性项目的子元素

Question

除非flex项具有设定的高度，否则Flex项目不允许％单位为其子元素工作;但是，通常使用flexbox的原因是明确设置高度会很困难。是否有某种技巧可以使flex-items的高度和宽度可以被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＆＃34; height：100％＆＃34;？使用我需要一个解决方案，假设flex项的高度未知。

编辑：我应该提到flex-item的子项是由其他人创建的widget，因此更改子项上的css不是最佳解决方案。

Answer 1

Example Fiddle

你试图在这里混合两种风格。为什么不继续＆＃34;思考Flex＆＃34;并且只是嵌套你的弹性物品？

您的新 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;
}