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

Posted 2023-03-05

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

【英文标题】：2 divs in the parent div(flex), first div is fixed width - expand second width to the rest [duplicate]

【发布时间】：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 就可以了

【参考方案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>