Css flexbox可以动态调整块的大小吗？

我正在尝试使用flexbox自动调整.filler元素的大小，使其高度相等，并根据元素的大小获取可用空间#正确。如果#right比#box短，则填充元素的高度应为0

我可以用左边的背景色来欺骗它，但我想知道是否有一种方法可以达到目标。填充

.container{
显示器：flex；
}
#左，#右，.filler{
宽度：50vw；
}
#左{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
背景颜色：粉红色；
}
.填料{
背景颜色：蓝色；
}
#盒子{
宽度：50vw；
身高：33.33vw；
背景颜色：绿色；
保证金：自动；
}
#对{
高度：75vw；
边框：纯色2px黑色；
}

---

通过使用Flex grow属性使用此属性

您必须使用名为“flex grow:1”的类连接每个项目，以增强与自身相关的其他项目

.柔性容器{
显示器：flex；
对齐项目：拉伸；
背景色：#f1f1；
}
.flex容器>div{
背景色：淡蓝色；
颜色：白色；
利润率：10px；
文本对齐：居中；
线高：75px；
字体大小：30px；
}
#左，#右{
宽度：50vw；
}
#左{
弯曲方向：立柱；
}
#对{
高度：100vw；
边框：纯色2px黑色；
背景色：黑色；
}
flex-grow属性
项目根据彼此的高度和宽度自动对齐

正确的
左边

why not margin:auto on green box？似乎没有做任何事情似乎方向正确，但没有提供工作示例

.filler {
    background-color:red;
  flex-grow:1;
}