不生效的情况
<div class="box-inner">
<div class="content"></div>
</div>
.box-inner{
min-height: 300px;
background: #cccccc;
}
.content{
height: 30%;
background: red;
}
此时不生效.content的高度为0,但若是在box-inner的外部再包裹一层div,并且设置为弹性盒,则可以生效
tips:此处利用弹性盒align-item默认拉伸高度
生效的情况
<div class="box-outer">
<div class="box-inner">
<div class="content"></div>
</div>
</div>
.box-outer{
display: flex; //重要
}
.box-inner{
width:100px;
min-height: 300px;
background: #cccccc;
}
.content{
width:60px;
height: 30%;
background: red;
}