如何在不换行时防止flex子项溢出flex父容器？

这个场景我太熟悉了——当你给flex子项设了min-width，容器又是row方向，窗口一缩窄就容易出现子项溢出的情况，核心原因其实是flex容器的默认行为限制：

默认情况下，flex容器的flex-wrap属性是nowrap，意思是不管子项总宽度多大，都强行挤在一行里。而你给子项设了min-width: 100px，这就相当于给子项的宽度设了一个“底线”——当容器宽度小于所有子项min-width加margin的总和时，子项没法再缩小，只能直接溢出父容器了。

下面给你两种最常用的解决办法，按需选择：

方案1：让子项自动换行（推荐，适合大多数响应式场景） #

给父容器添加flex-wrap: wrap属性，这样当容器宽度不够时，子项会自动换行到下一行，完全避免溢出：

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 关键新增属性 */
  background-color: red;
}
.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

这样调整后，子项在空间充足时会均匀拉伸（因为flex-grow:1），空间不足时就自动换行，完美适配不同宽度的窗口。

方案2：保持一行，添加横向滚动条 #

如果你的需求是必须让子项保持在一行，那可以给父容器加上overflow-x: auto，让容器出现横向滚动条，用户可以滚动查看所有子项：

.parent {
  display: flex;
  flex-direction: row;
  overflow-x: auto; /* 开启横向滚动 */
  background-color: red;
}
.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

这种方案适合那些必须保持横向排列的场景，比如移动端的横向导航栏。

额外补充：如果允许子项突破min-width缩小 #

要是你能接受子项在极端窄屏时比100px更窄，可以把min-width换成flex-basis: 100px，同时设置min-width: 0（解除最小宽度限制），这样子项就能根据容器宽度继续缩小了：

.child {
  min-width: 0; /* 解除最小宽度限制 */
  flex-basis: 100px; /* 初始基准宽度 */
  flex-grow: 1;
  flex-shrink: 1; /* 默认就是1，允许缩小 */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

不过这个方案要根据你的实际需求来用，毕竟如果必须保证子项至少100px宽，那前两种方案更合适。

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