如何让主容器自适应内容高度并消除文本溢出问题？

问题根源 #

你的布局溢出问题主要由两个核心原因导致：

1. 容器高度被固定：.section-main 设置了 height:100%，强制容器高度继承父元素，无法随内容自动扩展
2. 内容脱离文档流：.box-content 使用 position:absolute 定位，脱离了正常文档流，导致 .box-1 无法感知内容高度，自然不能自适应撑开
3. 冗余属性干扰：父元素是 flex 布局，子元素设置 display:inline-block 完全多余，反而可能影响布局逻辑

解决方案 #

直接修改以下 CSS 属性，让容器随内容自适应，同时用 flex 替代绝对定位实现居中：

修改后的完整 CSS 代码

.section-main {
  display: flex;
  max-width: 1650px;
  /* 移除固定height，让容器随内容高度自适应 */
}

.box-1 {
  box-sizing: border-box;
  width: 50%;
  background: #EDF3F7;
  outline: 1px solid #fff;
  outline-offset: -25px;
  /* 使用flex布局居中内容，替代绝对定位 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px; /* 替代outline-offset的布局间距，避免内容贴边 */
}

.box-2 {
  box-sizing: border-box;
  width: 50%;
}

.box-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，防止拉伸变形 */
}

.box-content {
  width: 80%;
  text-align: center;
  /* 移除绝对定位相关属性 */
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.flex-boxes {
  margin-right: 10px;
  margin-bottom: 10px; /* 新增换行时的间距，优化移动端显示 */
}

HTML 结构无需调整（保持原结构即可）

<section class="section-main">
  <div class="box-1">
    <div class="box-content">
      <p>Texttext text texttext text texttext text texttext text texttext text text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <div class="flex-container">
        <div class="flex-boxes">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
          <div> text text text</div>
        </div>

        <div class="flex-boxes">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
          <div> text text text</div>
        </div>

        <div class="flex-boxes">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
          <div> text text text</div>
        </div>
      </div>
    </div>
  </div>
  <div class="box-2">
    <img src="https://images.unsplash.com/photo-1697789179905-948d4844510d?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
  </div>
</section>

内容的提问来源于stack exchange，提问作者Dannie