通过为文本元素设置 width: min-content 并配合 min-width: 100%，可强制外层 div 宽度由内层 flex 容器（.inner）的实际内容宽度决定，同时确保长文本自动换行而非撑宽整个布局。
通过为文本元素设置 width: min-content 并配合 min-width: 100%，可强制外层 div 宽度由内层 flex 容器（.inner）的实际内容宽度决定，同时确保长文本自动换行而非撑宽整个布局。
在响应式或动态内容场景中，常遇到这样的布局需求：外层容器（.outer）本应“收缩包裹”其最宽的子元素（如 .inner 中的 flex 排列盒子），却被下方一段长文本意外撑开——尤其当 .inner 内部 box 数量动态变化、无法预设固定宽度时，传统 width: fit-content 或 display: inline-block 等方案易失效或破坏流式结构。
核心解法在于分离宽度控制逻辑：
- 让 .inner（flex 容器）自然计算其内容宽度（由子项 .box 的数量与尺寸共同决定）；
- 让文本元素（.text）不参与宽度扩张，而是“服从” .inner 的宽度边界，并在此范围内换行。
实现的关键 CSS 是：
.text {
width: min-content; /* 将元素初始宽度设为内容最小固有宽度（即单行不换行时的宽度） */
min-width: 100%; /* 但强制其最小宽度不低于父容器（.outer）当前计算出的宽度 */
}
⚠️ 注意：min-content 是 CSS Sizing Level 3 的标准关键字，现代浏览器（Chrome 84+、Firefox 66+、Safari 14.1+）均支持；若需兼容旧版 Safari，可降级使用 width: -webkit-min-content 作为前缀补充。
完整示例 HTML 与 CSS 如下：
<div style="background-color: #fff; padding: 20px; display: flex">
<div class="outer">
<div class="inner">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div> <!-- 动态增删 box 不影响布局逻辑 -->
</div>
<div class="text">
Here is a very long piece of text that is extending the outer too far,
when I want the width of outer to be limited by inner, and this sentence to wrap instead
</div>
</div>
</div>
.outer {
padding: 10px;
background-color: #cdcdcd;
}
.inner {
padding: 10px;
background-color: #fff;
display: flex;
/* 可选：添加 flex-wrap: wrap 支持多行 box，不影响外层宽度计算 */
}
.box {
height: 40px;
width: 80px;
background-color: red;
margin: 10px;
}
.text {
width: min-content;
min-width: 100%;
word-break: break-word; /* 增强长单词/URL 换行鲁棒性 */
margin-top: 10px; /* 视觉分隔，非必需 */
}
✅ 效果验证：无论 .inner 中包含 1 个还是 10 个 .box，.outer 的宽度始终等于 .inner 的实际渲染宽度（含 padding），而 .text 严格在其内部换行，不再横向拉伸容器。
? 进阶提示：若需更精细控制（如文本始终与 .inner 左右对齐），可将 .outer 设为 display: grid，并定义两行显式轨道：grid-template-rows: auto 1fr，再用 align-self: start 约束文本位置——但上述 min-content + min-width 方案已覆盖绝大多数动态宽度场景，简洁、语义清晰且无需 JavaScript 干预。
