Flexbox子元素含文本时覆盖相邻固定宽度子元素问题咨询

这是Flex布局的默认收缩规则导致的：Flex容器的所有子元素默认开启了flex-shrink: 1属性，当容器总宽度不足以容纳所有子元素的内容宽度时，子元素会按比例自动收缩，适应容器大小。

你给第一个子元素设置的width: 300px只是理想宽度，没有关闭收缩开关。当第二个子元素加入大量文本后，第二个子元素的默认最小宽度（文本不换行的宽度）会大幅增加，此时容器的总宽度不足以同时放下「第一个子元素的300px + 第二个子元素的文本最小宽度」，第一个子元素就会被自动压缩，视觉上看起来像是被第二个元素覆盖了。

两种方案任选其一即可：

• 固定宽度的子元素关闭收缩属性
  给.child1加一行flex-shrink: 0，明确要求浏览器这个元素始终保持设定的宽度，不参与空间不足时的收缩：

.child1 {
  background: red;
  width: 300px;
  flex-shrink: 0; /* 新增这行 */
}

• 自适应宽度的子元素放开最小宽度限制
  Flex子元素默认的min-width为auto，也就是宽度不会小于自身内容的最小宽度，给.child2加一行min-width: 0就能解除这个限制，让它主动收缩到剩余宽度大小，内部文本自动换行：

.child2 {
  background: blue;
  flex-grow: 1;
  min-width: 0; /* 新增这行 */
}

修改后两个元素就会严格按照「第一个固定300px、第二个填充剩余宽度」的规则布局，第二个元素内的文本也会自动换行。

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