本文详解如何通过 CSS 精确控制 Flex 布局中子元素的尺寸与溢出行为，解决图片和文字内容突破 .panel 容器边界的问题，核心在于合理设置 max-width、flex-basis 和 img 的响应式约束。
本文详解如何通过 css 精确控制 flex 布局中子元素的尺寸与溢出行为，解决图片和文字内容突破 `.panel` 容器边界的问题，核心在于合理设置 `max-width`、`flex-basis` 和 `img` 的响应式约束。
在您提供的代码中，.panel 虽设置了 max-width: 960px 和 display: flex，但在桌面端（@media (min-width: 900px)）切换为横向 flex-direction: row 后，三个 .pricing-plan 子项未限定宽度，导致浏览器默认按内容撑开，极易超出容器总宽；同时，.pricing-img 缺乏尺寸约束，高分辨率图片会直接突破父级 padding 和 max-width 限制。
✅ 正确做法是：为子项设定明确的弹性基础宽度，并强制图片自适应容器。以下是关键修复代码：
@media (min-width: 900px) {
.panel {
display: flex;
flex-direction: row;
/* 防止子项总宽超限：3列 + 2条1px边框 = 960px以内 */
}
.pricing-plan {
flex: 1 1 0; /* 关键：启用flex-grow，但以0为基准，由父容器均分 */
min-width: 0; /* 防止内容撑宽（尤其长文本/大图） */
padding: 25px 50px;
border-right: 1px solid gray;
}
.pricing-plan:last-child {
border-right: none;
}
/* 强制图片响应式缩放 */
.pricing-img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 25px; /* 居中且保留底部间距 */
}
}⚠️ 重要补充说明：
- 不要使用固定像素宽度（如
width: 240px），它在不同屏幕下易导致布局断裂； -
flex: 1 1 0是黄金组合：flex-grow: 1允许等分剩余空间，flex-basis: 0避免按内容宽度计算初始尺寸，真正实现均分； -
min-width: 0是防止子项内部（如长单词、大图）触发最小内容宽度（min-content）导致溢出的关键； - 所有图片必须添加
max-width: 100%; height: auto，否则<img alt="如何确保所有定价卡片元素严格限制在面板容器内" >默认为inline元素且无尺寸限制，必然突破容器。
? 额外建议：为提升移动端体验，可在小屏下给 .pricing-plan 添加 width: 100% 并包裹 overflow-x: hidden，彻底杜绝横向滚动风险。最终效果是：无论图片原始尺寸多大、文字多长，所有内容都将优雅地包裹在 whitesmoke 圆角面板内，严格遵循设计边界。
