父 div(flex) 中有 2 个 div，第一个 div 是固定宽度 - 将第二个宽度扩展到其余部分

Question

.parent {
display: flex;
}
.first {
width: 100px;
}
.second {
display: flex;
}// This is also flex parent div

<div class="parent">
<div class="first">first</div>
<div class="second">second
<div></div>
<div></div>
</div>
</div>

如何将第二个div扩展到其余部分？我不想将calc用于第二个div 样式。

Answer 1

将flex:1添加到.seconddiv(包括边框以显示实际大小(

.parent {
display: flex;
}
.first {
width: 100px;
border: 1px green solid;
}
.second {
flex: 1;
border: 1px red solid;
display: flex;
}

<div class="parent">
<div class="first">first</div>
<div class="second">second</div>
</div>

这会将flex-grow属性设置为1

Answer 2

使用flex属性值1.second类。这将使第二个div 适合宽度的其余部分。

.parent {
display: flex;
}
.first {
width: 100px;
border: 1px solid black;
}
.second {
flex: 1;
border: 1px solid black;
}

<div class="parent">
<div class="first">first</div>
<div class="second">second
<div></div>
<div></div>
</div>
</div>