父div#Content为何无法随子div#Maintext自适应扩展高度？

问题现象 #

• 给#Content设置固定高度height: 1000px时，内部#Maintext内容超出高度后会直接溢出容器外
• 尝试将#Content的height改为auto时，容器直接从视图中消失，仅能看到内部的#Maintext元素
• 预期效果：浅棕黄色背景的#Content容器高度可自动适配所有内部内容，与红色背景的#Maintext高度同步扩展

问题根因 #

• HTML标签存在语法与嵌套错误：代码中<main class="Titel">起始标签未添加对应闭合标签，同时<hr>、<br>属于HTML空元素，不需要额外书写</hr>、</br>闭合标签，错误的标签嵌套会导致浏览器渲染时DOM结构错乱，直接引发布局异常
• 对绝对定位元素的自适应逻辑存在误解：position: absolute的元素虽然脱离正常文档流，但height: auto默认就支持被内部块级内容撑开，出现设置auto后容器消失的问题，基本都是DOM结构解析错误导致的

修复步骤 #

1. 修正HTML结构，修复标签嵌套与语法错误，参考代码如下：

<div id="Content" > 
  <!-- 如果需要使用<main>语义标签，记得补充对应的</main>闭合标签，保证层级正确 -->
  <div class="Titel">
    <h1>Titel 1</h1>
    <hr>
  </div>
  <hr>
  <div id="Maintext">
    <p>text</p>
    <p>Start</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>Finish</p>
  </div>
</div> 

2. 调整#Content的CSS属性，移除固定高度，补充盒模型相关属性避免布局偏移，参考代码如下：

#Content {
  width: 1600px;
  /* 移除固定height: 1000px，默认值auto即可自动适配内容高度 */
  min-height: 200px; /* 可选：设置最小高度，避免内容过少时容器显示过矮 */
  position: absolute; 
  left: 320px;
  top: 110px;
  background-color: #d5c590;
  border-style: solid;
  border-radius: 10px;
  padding: 20px; /* 可选：增加内边距，避免内容紧贴容器边框 */
  box-sizing: border-box; /* 保证内边距、边框宽度不会撑大容器设置的1600px宽度 */
}

#Maintext {
  width: 570px;
  height: auto;
  background-color: red;
  font-size: 20px;
}

效果验证 #

• 修复标签结构后，#Content设置height: auto不会再出现消失的问题
• 后续增减#Maintext内部的内容，#Content的高度会自动跟随内容总高度同步扩展，不会再出现内容溢出容器的情况
• 如果后续#Content内部添加了浮动元素，只需要给#Content追加overflow: hidden属性触发BFC，即可正常撑开容器高度，不需要额外修改其他布局属性

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