我正在尝试使用flexbox自动将.filler元素的大小设置为相等的高度，并根据#right的大小获取可用空间。如果#right比#box短，则.filler元素的高度应为0。
我可以在#left上用background-color欺骗它，但想知道是否有一种方法可以定位.filler
.container{
display:flex;
}
#left,#right,.filler{
width:50vw;
}
#left{
display:flex;
flex-direction:column;
justify-content:center;
background-color:pink;
}
.filler{
background-color:blue;
}
#box{
width:50vw;
height:33.33vw;
background-color:green;
margin:auto;
}
#right{
height:75vw;
border:solid 2px black;
}<div class='container'>
<div id='left'>
<div class='filler'></div>
<div id='box'></div>
<div class='filler'></div>
</div>
<div id='right'>
</div>
</div>.filler {
background-color:red;
flex-grow:1;
}
使用此属性
通过使用Flex-grow属性
您必须将每个项目与一个名为“ flex-grow：1”的类相关联，以使彼此之间的相关性得到增强。
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
#left,#right{
width:50vw;
}
#left{
flex-direction:column;
}
#right{
height:100vw;
border:solid 2px black;
background-color:black;
}
</style>
</head>
<body>
<h1>The flex-grow Property</h1>
<p>The items align itself as per height and width of each other</p>
<div class="flex-container">
<div style="flex-grow: 1"><div id="right">right</div></div>
<div style="flex-grow: 1"><div id='left'>left</div></div>
</div>
</body>
</html>