Flex子项内容换行后自动拉伸原因及CSS/Grid解决方案咨询

针对你遇到的Flex布局问题，现在有两种纯CSS方案可以解决，包括优化的Flex写法和更直观的Grid布局：

方案一：优化Flex布局 #

问题根源是默认情况下，flex子项的宽度计算可能在内容换行时被拉伸填充剩余空间。通过给第一个自适应子项设置精准的flex属性，可以强制它的宽度仅由内容决定，不占用额外空间：

.flex-container {
  display: flex;
  align-items: flex-start; /* 根据需求调整垂直对齐方式 */
  gap: 0; /* 移除子项间默认间隙（如果不需要） */
}

/* 第一个自适应子项 */
.flex-item-1 {
  flex: 0 1 fit-content; /* 核心设置：不拉伸、可收缩、宽度由内容决定 */
  white-space: pre-wrap; /* 允许内容自动换行，根据需求选择 */
}

/* 固定尺寸的子项 */
.flex-item-2, .flex-item-3 {
  width: 80px; /* 替换为你的固定宽度 */
  height: 80px; /* 替换为你的固定高度 */
  background-color: #eee;
}

• flex: 0 1 fit-content：flex-grow:0阻止子项拉伸填充剩余空间，flex-shrink:1允许容器过窄时子项收缩（不会溢出），fit-content让宽度完全由内容（包括换行后的内容）决定。
• 搭配white-space: pre-wrap确保内容可以正常换行，避免溢出容器。

方案二：Grid布局（更直观） #

Grid布局的列定义逻辑更直接，能精准控制每一列的宽度规则，完全避免Flex的计算歧义：

.grid-container {
  display: grid;
  /* 第一列宽度由内容决定（最大不超过容器宽度），后两列固定宽度 */
  grid-template-columns: fit-content(100%) 80px 80px;
  align-items: flex-start; /* 可选：调整垂直对齐 */
  gap: 0; /* 移除间隙 */
}

.grid-item-2, .grid-item-3 {
  width: 80px;
  height: 80px;
  background-color: #eee;
}

• fit-content(100%)：第一列宽度自适应内容，但不会超过容器宽度，内容换行时自动收缩到换行后的实际宽度。
• 固定宽度的列会始终紧跟第一列，不会出现多余间隙，布局逻辑更清晰。

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