Javascript FlexBox-嵌套div-won'；t填充它'；当给出100%的高度时，s的父对象 .container{ 高度：100vh； 宽度：500px； 边框：1px纯黑； } .布局{ 显示器：flex； 最小高度：100%； 背景颜色：蓝色； 弯曲方向：立柱； } .标题{ 高度：50px； 背景颜色：橙色； } 梅因先生{ 柔性生长：1； 背景色：红色； } .主要子女{ 身高：100%； 宽度：100%； 背景颜色：黄色； } .页脚{ 自我证明：柔性端； 背景颜色：紫色； }

《洛雷姆·伊普苏姆》中有很多不同的段落，但大多数都经历了某种形式的变化，比如注入幽默，或者随机的词语，这些词语看起来甚至一点都不可信。

我的问题是，为什么黄色部分不是红色部分的全尺寸？

文本

我的嵌套div，

main child

的高度为100%，但是它不会填充父div（它位于flex框中，并且使用flex grow调整大小）。我希望子对象扩展到其父对象的填充大小

我怎样才能避开这件事

.main{
柔性生长：1；
背景色：红色；
显示器：flex；
}
.主要子女{
弹性：1；
宽度：100%；
背景颜色：黄色；
}

虽然此代码可以回答问题，但提供有关此代码回答问题的原因和/或方式的其他上下文可以提高其长期价值。