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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。