如何让Flex父容器中第二个Div占满剩余宽度？不使用calc属性

嘿，这个需求用Flex布局本身就能轻松搞定，完全不需要calc！给你两种简单可靠的方法：

方法一：使用flex-grow: 1 #

给第二个子元素（.second）添加flex-grow: 1属性就行。原理很简单：Flex布局里，flex-grow定义了子元素的放大比例，默认值是0（也就是不抢占剩余空间）。当把它设为1时，这个元素会把父容器里除了固定宽度元素之外的所有剩余空间都占满。

修改后的代码如下：

.parent { display: flex; }
.first { width: 100px; }
.second { 
  display: flex;
  flex-grow: 1; /* 关键属性 */
}

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

方法二：使用简写属性flex: 1 #

如果你想更简洁，可以直接用flex: 1，它是flex-grow: 1、flex-shrink: 1、flex-basis: 0%的简写。这个写法更健壮，不仅能让元素占满剩余空间，还能在父容器空间不足时自动收缩（不过你的场景里第一个元素宽度固定，这个收缩特性可能用不上，但写简写是个好习惯）。

修改后的.second样式：

.second { 
  display: flex;
  flex: 1; /* 简写属性，效果和上面一致 */
}

顺便提一句：.second自身是Flex容器这件事完全不影响它作为父容器子元素的空间分配，这两个角色的属性是独立的，放心用就行～

内容的提问来源于stack exchange，提问作者Remy Wang