Javascript Flexbox CSS-在不影响其他行的情况下，扩展一个框以适应内容

我试图强制最下面的黄色行向下展开以填充可用内容：

我假设这可以通过使用：

flex：自动

我对这个问题的.js解决方案持开放态度，但如果有一个纯粹的css解决方案，这显然是理想的。我希望我不必更改我的HTML标记

我的想法是，我有一个浅绿色的固定顶部容器，和一个可以增长以容纳内容的底部容器，即使底部容器分为两列。

使用flex:1 0 100%on.row代替

.包装行{ 最小高度：100px； } .行{ 显示器：flex； 弹性：10100%； 弯曲方向：行； } 上校{ 显示器：flex； 弯曲方向：立柱； 柔性生长：1； 弹性基准：0； } /*无论底部内容如何，顶行必须始终为50px*/ .第一排{ 背景颜色：浅绿色； 弹性基准：50px； } .底层{ 背景颜色：黄色； flex：自动； /*这将允许底部行展开*/ } 由于flex:auto，此内容应完全包含在黄色区域内。为什么不是呢？ Lorem ipsum dolor sit amet，是一位杰出的献身者。在金樱子中，在猫科植物中，在前庭按摩元素处。颞大叶悬韧带。 不，不，不，不。同侧前叶，车辆识别缺陷，大白令。整数莫利斯·努克·奎斯·利奥·波特特·康格。不，不，不，不。斜纹夜蛾中的脯氨酸 乌兰科珀。这是一辆汽车。欧盟莫利斯苏打粉前发酵悬浮液。

---

首先，您必须使大量父容器也填满可用空间。设置为增长到其父元素底部的元素不会向下推父元素的底部。从html开始，正文{margin:0，height:100vh}我可以问一下为什么到处都有嵌套的col和wrapper吗？你的标记可以简化很多，如果你只需要一个上面的绿色和两个下面的绿色，并排排列，从底部到底部都占据相同的高度，然后随着内容的增长而增长我同意标记可以简化。不幸的是，这就是我要处理的..row{…flex:1；..}将满足同样的要求。col它看起来像flex:10 1；由于某些原因，它实际上效果更好。100%值在Safari中无法正常工作。@DarrenGates cool您想编辑我的答案吗？随便做吧，我会批准的。不，还是不错的。我认为这是一个狩猎迷。