父 div（flex）中的 2 个 div，第一个 div 是固定宽度 - 将第二个宽度扩展到其余部分 [重复]答案

【问题标题】：2 divs in the parent div(flex), first div is fixed width - expand second width to the rest [duplicate]父 div（flex）中的 2 个 div，第一个 div 是固定宽度 - 将第二个宽度扩展到其余部分 [重复]
【发布时间】：2020-04-02 10:24:33
【问题描述】：

.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 样式。

【问题讨论】：

设置 flex-grow: 1 就可以了

标签： html css

【解决方案1】：

将flex:1 添加到.second div（包括边框以显示实际大小）

.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

【讨论】：

【解决方案2】：

为.second 类使用flex 属性值到1。这将使第二个 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>

【讨论】：