Javascript CSS：如何使一列中的两个项目最多占用相同的空间，但如果一个项目比另一个项目小，则使另一个项目增长？

我有一个非常基本的CSS问题要解决：我有两个div，a和B，在另一个div“Parent”中。A在B的上面

如果一个网站有内容，让它成长。B将至少占父分区的50%高度。A将增长，直到它占用了相等的空间，因为B.A不能增长超过B；如果A的内容溢出，请使其可滚动

---

我正试图完成这个flexbox，但却无法解决它。将

flex:none

和

max height:50%

分配给A和

flex:1 10

分配给B会导致A比B增长得更大，如果A有很多内容。

这是否实现了您想要的目标？更改

.content

的

高度

值，以查看容器如何响应调整大小

关键行在

.b

类中，我们在其中设置规则

flex:1 0 50%

。这意味着：

从集装箱50%的高度或弹性基础开始

以1的倍数成长。另一个flex项没有

flex grow

属性，因此这本质上转化为“填充容器的其余部分”

不要在

弹性基础
50%以下收缩

.parent{
宽度：300px；
高度：500px；
显示器：flex；
弯曲方向：立柱；
}
.a{
宽度：100%；
最大高度：50%；
背景色：石板蓝；
溢出：自动；
}
.b{
宽度：100%；
弹性：1050%；
背景颜色：深红色；
}
.内容{
高度：300px；
背景色：柠檬色；
利润率：20px；
}