使用 flex-wrap: wrap 替代固定布局，配合合理的 flex 属性与显示控制，可确保图标、文本和按钮在响应式缩放时保持结构完整、不越界。
在当前的 Flex 布局中，.info-box-section 使用了 display: flex 但未启用换行（flex-wrap: nowrap 是默认值），导致当容器宽度不足时，子元素（尤其是长文本和右侧按钮）被强制挤压或溢出边界。同时，.info-box-action-button 上错误使用了 float: right —— 在 Flex 容器内，浮动属性会被忽略，不仅无效，还可能干扰渲染逻辑。
✅ 正确解法是：启用弹性换行 + 合理分配主轴空间 + 移除无效浮动。
以下是优化后的完整 CSS 方案：
.info-box-container {
border: 1px solid black;
padding: 8px 20px;
width: 100%; /* 显式声明宽度，增强响应可控性 */
box-sizing: border-box;
}
.info-box-container .info-box-section {
display: flex;
flex-flow: row wrap; /* 关键：允许子项换行 */
align-items: center;
gap: 12px; /* 替代 margin-left，更语义化且统一间距 */
}
.info-box-container .info-box-section .info-box-text {
flex: 1; /* 占据剩余可用空间，但受 wrap 约束 */
min-width: 0; /* 允许文本内容安全收缩（防止长单词撑破） */
word-break: break-word; /* 主动断行，提升小屏可读性 */
}
.info-box-container .info-box-section .info-box-icon {
flex-shrink: 0; /* 防止图标被压缩 */
}
.info-box-container .info-box-section .info-box-action-button {
flex-shrink: 0; /* 确保按钮尺寸稳定 */
/* 移除 float: right —— Flex 中无需浮动 */
}? 关键改进说明：
- flex-flow: row wrap 让按钮在空间不足时自动下移至第二行，而非强行挤占文本区域；
- gap: 12px 替代 margin-left，避免嵌套 margin 复杂性，且对换行后间距依然生效；
- min-width: 0 + word-break: break-word 双重保障长文本不破坏布局；
- 移除 float: right 并添加 flex-shrink: 0，使图标与按钮具备抗压缩能力，保证视觉一致性。
? 额外建议（进阶响应式）：
如需在极小视口（如手机）下进一步优化，可增加媒体查询，将布局转为垂直堆叠：
@media (max-width: 480px) {
.info-box-container .info-box-section {
flex-direction: column;
align-items: flex-start;
}
.info-box-container .info-box-section .info-box-text {
margin-top: 8px;
}
}这样，无论窗口如何缩放，内容始终居中、自适应、不溢出，真正实现健壮的响应式 Flex 布局。
