flex布局的高度问题且内容自适应flex:1的高度
HTML
<div id="main">
<div class="autoHeight">高度不确定</div>
<div class="div1">
</div>
</div>
css
#main
{
width:220px;
height:100vh;
border:1px solid black;
display:flex;
flex-direction: column;
}
.div1 {
border:1px solid black;
flex: 1;
display:flex;
}
当div1的内容撑满了,div1的高度并不是#main的高度减.autoHeight的高度,而是div1的内容高度
需要解决溢出并且让div1中的内容自适应只需要给div1加height:0
就解决了
css
.div1 {
border:1px solid black;
flex: 1;
display:flex;
height:0;
}