使用 `flex-wrap: wrap` 配合合理的 弹性布局 属性，可确保图标、文本和按钮在小屏幕下自动换行并保持居中对齐，避免内容溢出容器边界。
在当前的 Flex 布局中，.info-box-section 使用了 display: flex 但未启用换行（flex-wrap: nowrap 默认值），导致当容器宽度不足时，子元素被强行挤压或溢出——尤其是右侧的按钮因设置了 float: right（与 Flex 布局冲突）而脱离文档流，进一步破坏布局稳定性。
✅ 正确解法是 移除 float，改用原生 Flex 行为控制换行与对齐：
.info-box-container {border: 1px solid black; padding: 8px 20px;} .info-box-container .info-box-section {display: flex; flex-flow: row wrap; /* ✅ 允许子项换行 */ align-items: center; /* 垂直居中（主轴为 row 时作用于交叉轴）*/ gap: 12px; /* ✅ 替代 margin-left，更语义化且响应友好 */} .info-box-container .info-box-section .info-box-text {flex: 1; /* ✅ 占据剩余空间，自动伸缩 */ min-width: 0; /* ✅ 关键！防止长文本强制撑宽（配合 flex:1 必须设置）*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .info-box-action-button {/* 移除 float: right；Flex 自动按顺序排列 */ /* 可选：添加自适应最小宽度 */ flex-shrink: 0;}? 关键优化说明：
- flex-flow: row wrap 让按钮在空间不足时自动换至第二行，而非溢出；
- gap: 12px 替代 margin-left，避免父子间 margin 折叠问题，且天然支持响应式；
- min-width: 0 是 flex: 1 的黄金搭档——防止长文本（如连续无空格字符串）突破容器限制；
- 移除 float：它与 Flex 布局不兼容，会导致渲染异常和对齐失效。
? 进阶建议（适配移动端）：
若需在极窄视口（如手机）下实现「图标 + 文本居中，按钮独占一行并居中」，可叠加媒体查询：
@media (max-width: 480px) {.info-box-section { flex-direction: column; text-align: center;} .info-box-text {width: 100%;} .info-box-action-button {align-self: center;} }这样，整个组件即可在任意视口尺寸下保持结构完整、内容不溢出、视觉层次清晰。
