通过为文本元素设置 width: min-content 配合 min-width: 100%，可强制外层 div 宽度由内层 flex 布局的自然宽度决定，同时确保长文本自动换行、不溢出。
通过为文本元素设置 width: min-content 配合 min-width: 100%，可强制外层 div 宽度由内层 flex 布局的自然宽度决定，同时确保长文本自动换行、不溢出。
在 CSS 布局中，当外层容器（如 .outer）包含一个弹性布局的子容器（.inner）和一段纯文本时，浏览器默认会按内容宽度展开外层容器——尤其是长文本会无约束地拉伸整个结构，导致 .outer 宽度远超 .inner 的实际尺寸。这违背了“外层宽度应由内层 flex 容器主导”的设计意图。
解决的关键在于切断文本对父容器宽度的主动贡献，同时保留其响应式换行能力。推荐方案是为文本元素单独添加如下样式：
.text {
width: min-content; /* 将元素宽度设为其内部最小固有宽度（即单行不换行时的宽度） */
min-width: 100%; /* 但强制其最小宽度不得小于父容器当前可用宽度 → 触发换行 */
}该组合的精妙之处在于：
- width: min-content 让文本节点“放弃”默认的 auto 行为，不再参与外层容器的宽度计算；
- min-width: 100% 则确保它始终占据父容器（.outer）的全部可用宽度，从而在内容过长时自然折行，而非撑宽容器。
✅ 注意事项：
- 此方案依赖现代浏览器支持（Chrome 62+/Firefox 65+/Safari 14.1+），IE 不支持 min-content；
- .outer 不应设置 display: flex 或 inline-block 等会改变块级行为的显示模式，否则可能干扰 min-content 的计算逻辑；
- 若 .inner 中 box 数量极多，建议配合 flex-wrap: wrap 和 max-width 控制整体尺寸，避免过度横向延展。
最终 HTML 结构保持语义清晰，仅需为文本包裹 <div class="text"> 即可生效，完全适配动态数量的 .box 元素，无需硬编码宽度或 JavaScript 干预。
