如何阻止flex-grow超出max-width设置并实现内容自动换行？

异常原因 #

布局出现父容器max-width被突破、child2被挤出可视区的核心原因有两点：

1. .child1 设置了 flex-shrink: 0，完全禁止了自身收缩能力，内容过长时不会压缩宽度，会直接撑开父容器
2. flex布局子项默认 min-width: auto，子项最小宽度默认等于内容宽度，即使开启收缩属性也会被该规则限制，无法收缩到小于内容宽度的尺寸

修改方案 #

只需要调整.child1的flex配置与最小宽度限制即可，不需要改动其他逻辑，完全符合「内容少的时候占满可用宽度、内容多的时候自动换行不撑破父容器」的需求：

.child1 {
  /* flex-grow保持1，占满剩余宽度；开启flex-shrink允许收缩 */
  flex: 1 1 auto;
  /* 覆盖默认min-width:auto，允许收缩到小于内容宽度 */
  min-width: 0;
  /* 可选：如果有连续长字符（比如长链接、无空格英文），添加该属性强制换行 */
  overflow-wrap: break-word;
  background: lightgrey;
}

效果验证 #

• 当child1内容较少时：flex-grow:1会让child1占满parent除child2内容宽度之外的所有可用空间，不会出现两个子元素都只占最小宽度的情况
• 当child1内容较多时：child1可以正常收缩，parent的max-width:300px限制会正常生效，child1内容超出宽度后自动换行，child2始终在可视区域内展示

修改后的完整CSS代码如下：

.grandParent {
  display: flex;
  flex-flow: column wrap;
}
.parent {
  background: lightred;
  display: flex;
  max-width: 300px;
  border: 1px solid blue;
}
.child1 {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  background: lightgrey;
}
.child2 {
  flex: 0 1 auto;
  background: lightgreen;
}

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