本文讲解如何通过移除绝对定位、改用 CSS Grid 居中及合理设置盒模型，使 .section-main 下的左右区块（尤其是含文本的 .box-1）自动撑开高度以完整包裹内容，彻底解决文字溢出、容器高度塌陷和布局错位问题。
本文讲解如何通过移除绝对定位、改用 css grid 居中及合理设置盒模型，使 `.section-main` 下的左右区块（尤其是含文本的 `.box-1`）自动撑开高度以完整包裹内容，彻底解决文字溢出、容器高度塌陷和布局错位问题。
在构建响应式图文并排组件（如产品介绍、卡片式布局）时，一个常见痛点是：左侧文本容器（.box-1）未随内容自然伸展，导致文字被裁剪或从容器顶部/左侧溢出——这通常源于对 position: absolute 的误用与弹性/网格布局的配合失当。
根本原因在于您当前的 .box-content 使用了 position: absolute + transform: translate(-50%, -50%) 实现居中。该方式会将元素脱离文档流，父容器 .box-1 无法感知其真实高度，从而高度坍缩为 0（或仅由其他非绝对定位子元素撑起），最终引发内容溢出。
✅ 正确解法分两步：
1. 移除绝对定位，回归流式布局
将 .box-content 改为普通块级元素，保留语义化结构与自然高度计算：
.box-content {
width: 80%;
text-align: center;
/* 删除 position, top, left, transform */
}
2. 用 CSS Grid 精准垂直水平居中（推荐方案）
直接在 .box-1 上启用 display: grid 并使用 place-items: center —— 它等价于 justify-items: center; align-items: center;，简洁高效且兼容性极佳（支持所有现代浏览器及 IE11+）：
.box-1 {
display: grid; /* 启用 Grid 布局 */
place-items: center; /* 一键居中子元素（含 .box-content） */
box-sizing: border-box;
width: 50%;
background: #EDF3F7;
outline: 1px solid #fff;
outline-offset: -25px;
/* 删除 position: relative（非必需，除非有其他绝对定位需求） */
}
同时建议优化 .section-main 的高度声明：height: 100% 在无明确父高时无效，易导致意外行为。改为 min-height: fit-content 或直接移除，交由内容驱动高度：
.section-main {
display: flex;
max-width: 1650px;
/* height: 100%; ← 删除此行 */
min-height: fit-content; /* 可选：确保最小高度适配内容 */
}
? 额外提示：
- 若需兼容老版本 Safari（
- .box-2 img 的 height: 100% 依赖父容器高度，建议补充 object-fit: cover 防止拉伸失真；
- 所有 outline-offset: -25px 可能造成视觉裁剪，建议改用 padding 或 border + background-clip 更安全地实现描边内缩效果。
经以上调整，.box-1 将完全根据 .box-content 的实际内容高度自动伸展，文字不再溢出，整体布局稳定可控，真正实现“内容驱动容器”的响应式设计原则。
