使用 `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;
}
}这样，整个组件即可在任意视口尺寸下保持结构完整、内容不溢出、视觉层次清晰。
