flex 子元素设置了 flex: 1，为什么还是被长内容撑宽了？

原因在于 flex 子元素的 min-width 默认值是 auto：子元素不会收缩到比它内容的最小宽度更窄。一段没有空格的长链接，最小宽度就是它的整个长度，于是 flex: 1 也压不住它。

给这个子元素加上 min-width: 0 就行：

.main {
  flex: 1;
  min-width: 0;
}

然后再按内容决定怎么处理溢出：

• 长链接、长单词：overflow-wrap: anywhere; 允许在任意位置换行。
• 表格、代码块：外面包一层 overflow-x: auto 的容器，让它在自己的区域里横向滚动。

grid 布局里也有同样的现象：1fr 的最小值同样是 auto。把列写成 minmax(0, 1fr) 就能解决。