每当蓝色 div 中的内容增长时,我需要容器和绿色 div 增长为与蓝色相同的大小。
.container {
background: grey;
height: 200px;
flex-direction: column;
padding: 10px;
display: flex;
}
.normal {
background: green;
}
.wide {
width: 2500px;
background: blue;
flex: 1 0 auto;
}
<div class="container">
<div class="normal">Normal</div>
<div class="wide">Wide</div>
</div>
最佳答案
改为考虑inline-flex
.container {
background: grey;
height: 200px;
flex-direction: column;
padding: 10px;
display: inline-flex;
min-width:100%; /*to make sure it behave like flex if the content is small*/
box-sizing:border-box;
}
.normal {
background: green;
}
.wide {
width: 2500px;
background: blue;
flex: 1 0 auto;
}
<div class="container">
<div class="normal">Normal</div>
<div class="wide">Wide</div>
</div>
相关:Why does the outer <div> here not completely surround the inner <div>?
关于css - 如何使 Flex 中的父容器和其他子容器成长为最长的子容器之一,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59662040/