当容器使用 position: absolute 的子元素时，若父容器未设置明确的 width 或 max-width，overflow: hidden 将无法正确裁剪溢出内容；解决关键是为 .container-wrapper 添加 max-width 以确立边界约束。
当容器使用 `position: absolute` 的子元素时，若父容器未设置明确的 `width` 或 `max-width`，`overflow: hidden` 将无法正确裁剪溢出内容；解决关键是为 `.container-wrapper` 添加 `max-width` 以确立边界约束。
在 CSS 布局中，overflow: hidden 并非“万能裁剪开关”——它仅对具有明确尺寸上下文的块级容器生效。你遇到的问题根源在于：.container-wrapper 虽设置了 width: 100% 和 height: 100%，但其父元素 .custom-section 的 width: 100% 是相对视口或最近块级包含块计算的，而当内部存在 position: absolute 的 .images-wrapper 时，该绝对定位元素会脱离文档流，其宽度（由 display: flex + 多张固定宽图片 + gap 累加）可能远超父容器的实际渲染宽度。此时，若 .container-wrapper 缺乏明确的 max-width 或 width（尤其在响应式或弹性布局中），浏览器无法确定“隐藏区域”的确切边界，导致 overflow: hidden 形同虚设。
✅ 正确做法是：显式定义 .container-wrapper 的最大宽度，确保其拥有可被 overflow 识别的盒模型边界。例如：
.custom-section .container-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
max-width: 1100px; /* 关键！设定物理边界 */
margin: 0 auto; /* 可选：居中显示 */
}同时，为提升健壮性，建议补充以下优化：
- ✅ 避免绝对定位引发的溢出不可控：若
.images-wrapper不需精确定位，优先改用position: static+flex或grid布局； - ✅ 为图片添加
flex-shrink: 0：防止 Flex 容器在空间不足时压缩图片（尤其在小屏下）：.custom-section .images-wrapper img { width: 300px; height: 430px; flex-shrink: 0; /* 防止被压缩变形 */ } - ✅ 响应式兜底：搭配媒体查询，在小屏下调整图片尺寸或布局方式：
@media (max-width: 768px) { .custom-section .images-wrapper { flex-wrap: wrap; gap: 15px; } .custom-section .images-wrapper img { width: 140px; height: 200px; } }
⚠️ 注意事项：
-
overflow: hidden对position: fixed或position: absolute元素的裁剪效果，严格依赖父容器是否生成新的层叠上下文（BFC）且具有明确尺寸；仅靠position: relative不足以保证裁剪，width/max-width/height缺一不可。 - 不要依赖
width: 100%在无约束父容器中“自动适配”——它只是继承计算值，而非创建物理边界。 - 调试时可用浏览器开发者工具检查
.container-wrapper的实际渲染尺寸（Computed → width/height），确认是否与预期一致。
通过添加 max-width 并辅以合理的 Flex 行为控制，即可让 overflow: hidden 真正生效，精准裁剪超出容器范围的图像内容。
