在 CSS Flexbox 布局中，我们经常遇到一个棘手的问题：明明设置了 flex: 1 让子元素自动填充剩余空间，但当子元素内部包含过长的不可换行文本（如长 URL 或代码块）时，容器却被意外撑开，甚至导致页面出现水平滚动条。
本文将通过一个简单的示例来解释这个现象的原因以及 min-width: 0 如何解决它。
问题复现：默认行为 (min-width: auto)
假设我们有一个 Flex 容器，左侧是固定宽度的侧边栏，右侧是希望自适应的内容区域。
<div class="flex-container">
<div class="sidebar">侧边栏 (150px)</div>
<div class="content content-a">
<p class="title">❌ 区域 A：仅使用 flex: 1;</p>
<div class="long-text">
https://这是一个很长很长很长的不可分割URL...
</div>
</div>
</div>
如果我们只给内容区域设置 flex: 1：
.content {
/* 相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1;
}
.long-text {
white-space: nowrap; /* 强制不换行，使其不可分割 */
}
观察结果：整个 .flex-container 会被撑开，页面出现水平滚动条。
原因分析：
Flex 子项（flex item）默认有一个隐式的 min-width: auto。这意味着子项的最小宽度不能小于其内容的最小内容宽度（min-content size）。当内部有不可换行的长文本时，这个“最小内容宽度”就是文本的长度。因此，即使设置了 flex-shrink: 1，浏览器也不会将其压缩到小于文本长度的宽度，从而导致溢出。
解决方案：使用 min-width: 0
为了让 Flex 子项能够真正自由收缩，我们需要覆盖默认的 min-width 行为，明确允许它被压缩到 0 宽度。
.content-b {
flex: 1;
/* 解决溢出的关键属性：它允许元素被压缩到 0 宽度，解除内容的最小宽度限制 */
min-width: 0;
}
加上 min-width: 0 后，我们告诉浏览器：这个元素的最小宽度可以是 0。这样，Flexbox 的收缩算法（flex-shrink）就能生效，强制将该元素压缩到剩余空间的大小，而不管内部内容有多宽。
完整代码对比
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.flex-container {
display: flex;
width: 650px; /* 固定宽度以便观察溢出 */
border: 3px solid #0056b3;
gap: 15px;
overflow: auto; /* 方便观察 */
}
.sidebar {
width: 150px;
flex-shrink: 0;
background-color: #f0f0f0;
}
.content {
flex: 1;
padding: 10px;
}
.long-text {
white-space: nowrap;
overflow: hidden;
background: #eee;
}
/* ❌ 失败案例 */
.content-a {
background-color: #ffe0e0;
/* 默认 min-width: auto */
}
/* ✅ 成功案例 */
.content-b {
background-color: #e0ffe0;
min-width: 0; /* 关键 */
}
</style>
</head>
<body>
<h3>❌ 失败案例：内容撑破容器</h3>
<div class="flex-container">
<div class="sidebar">Side</div>
<div class="content content-a">
<div class="long-text">LongTextLongTextLongTextLongTextLongTextLongText</div>
</div>
</div>
<h3>✅ 成功案例：内容正常收缩</h3>
<div class="flex-container">
<div class="sidebar">Side</div>
<div class="content content-b">
<div class="long-text">LongTextLongTextLongTextLongTextLongTextLongText</div>
</div>
</div>
</body>
</html>
总结
在使用 flex: 1 创建自适应布局时，尤其是嵌套了可能产生长内容的组件（如 <pre> 代码块、长 URL 链接、表格等）时，习惯性地加上 min-width: 0（或者在列方向布局时加上 min-height: 0）是一个避免布局溢出的最佳实践。