html - 父 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 样式。

标签： htmlcss

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