.d-flex容器内容撑破父容器宽度是因为flex默认nowrap且子项min-width:auto不收缩。解决需组合flex-wrap换行与flex-shrink压缩，表格等特殊内容须用.table-responsive包裹。
为什么 .d-flex 容器内容会撑破父容器宽度
直接给父元素加 d-flex 后，子元素默认不换行、不收缩，一旦总宽度超过 100%，就会横向溢出。这不是 Bug，而是 flex 的默认行为：flex-wrap: nowrap + min-width: auto 共同导致的。
- 子元素（如
div）在 flex 容器中默认有min-width: auto，阻止浏览器自动压缩 -
d-flex不带flex-wrap类时，等价于flex-wrap: nowrap，强制所有子项挤在同一行 - 如果子项是图片、长文本、
input或设置了固定width，更容易突破容器边界
用 .flex-wrap 和 flex-shrink 控制换行与收缩
解决溢出的核心是让 flex 子项「能换行」且「可压缩」。Bootstrap 4+ 提供了对应工具类，但需组合使用：
- 加
flex-wrap类启用换行（等价于flex-wrap: wrap），子项超出就折行 - 对具体子项加
flex-shrink-1（Bootstrap 4）或flex-shrink（Bootstrap 5），允许其压缩；不加则默认flex-shrink: 1，但某些内联元素或表单控件会失效 - 避免对子项设死
width（如width: 300px），优先用flex-basis相关类（如col-6、flex-grow-1）
示例：防止两个并排按钮在小屏上溢出
<div class="d-flex flex-wrap"> <button class="btn btn-primary flex-shrink-1">长按钮文字</button> <button class="btn btn-secondary flex-shrink-1">另一个按钮</button> </div>
表格、代码块等特殊内容必须包裹 .table-responsive
原生表格（<table>）和预格式化内容（<pre>）不响应 flex 布局规则，即使父级是 d-flex，它们仍按自身宽度渲染，极易撑破容器。
- 表格必须用 Bootstrap 的
.table-responsive包裹，它会给内部table添加display: block和横向滚动容器 - 不要把
<table>直接塞进d-flex，除非你明确控制了table的max-width和overflow-x -
<pre><code>同理，建议外层加overflow-x: auto或用.text-truncate截断长行
移动端小屏下 .container 与 flex 的宽度冲突
.container 在小屏幕（如 sm）下有固定最大宽度（如 540px），而 d-flex 子项若未约束，可能因 padding/margin/border 累计超出该宽度，触发横向滚动条。
- 检查是否误用了
.container-fluid却期望固定宽度效果 - 避免在 flex 子项上叠加多层
px-*（如px-4）和mx-*，容易让总宽度超限 - 用浏览器 DevTools 的「Layout」面板查看实际
content + padding + border总和，确认是否超过.container当前断点下的max-width
真正难处理的不是 flex 本身，而是你忘了子元素自带的最小尺寸约束和外部内容（比如表格、iframe）根本不听 flex 指挥——这些地方最容易漏掉包裹或重置样式。
