Flexbox特定宽度下内容异常溢出问题排查求助

核心原因 #

这是Flexbox布局中最小内容宽度计算的临界冲突导致的：

• Flex子项默认的min-width:auto会让子项优先维持自身内容的最小宽度，当卡片的max-width处于471px-510px区间时，容器总宽度刚好小于「所有子项最小内容宽度之和」，最右侧的Spelling栏没有足够空间让文本换行，最终出现溢出。
• 第二栏的额外占用空间，是Flex布局为了满足子项最小宽度要求，拉伸其他子项来填补容器空间的副作用。

解决方法 #

方案1：强制Flex子项可收缩（推荐） #

给卡片内的所有Flex子项添加min-width:0，打破默认的最小宽度限制，让子项可以根据容器宽度自动调整，文本自然换行：

.card .column {
  min-width: 0;
}

方案2：优化文本换行规则 #

给Spelling栏的文本容器添加强制换行属性，确保文本不会溢出：

.card .column:last-child {
  word-break: break-word;
  overflow-wrap: break-word;
}

方案3：调整Flex换行规则 #

如果布局允许换行，可以给卡片的Flex容器设置flex-wrap:wrap，避免子项挤在一行：

.card .row {
  flex-wrap: wrap;
}

方案4：避开临界宽度区间 #

直接修改卡片的max-width到470px以下或511px以上，但这只是规避问题，无法从根本上解决布局的适配性问题。

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