等宽flexbox容器无法容纳内容时如何实现自动换行？

问题分析 #

当前代码无法触发换行的核心原因：

• flex: 1 0 0 中 flex-basis: 0 让项目宽度由 flex-grow 强制分配，即使分配的宽度小于内容所需，overflow: hidden 会直接截断文本，导致项目不会被内容撑开，容器始终判定有足够空间容纳两个项目，因此不会触发换行。
• 未设置项目的最小宽度限制，无法基于内容宽度触发换行条件。

解决方案 #

修改 .item 的CSS样式，同时满足同宽、内容适配、自动换行三个需求：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background: lightcyan;
  width: 90%;
  margin: 20px auto;
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  padding: 20px;
}

.item {
  background: salmon;
  padding: 10px;
  /* flex-grow:1 保证同宽，flex-shrink:0 禁止缩小，flex-basis:min-content 最小宽度由内容决定 */
  flex: 1 0 min-content;
  /* 可选：如果希望长文本自动换行避免溢出，添加以下样式 */
  /* word-break: break-all; */
}

效果说明 #

• 容器宽度充足时：两个项目并排，宽度完全相同，取值为 max(内容最小宽度, (容器宽度 - gap)/2)。
• 容器宽度不足时：当容器宽度小于「2倍内容最小宽度 + gap」时，自动换行，两个项目各占一行，宽度均为容器宽度，保持同宽。

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