CSS布局异常排查：容器溢出、元素高度超限及底部重叠问题

期望与实际布局 #

• 期望布局：
• 实际布局：

问题代码 #

CSS代码 #

body { margin: 0; box-sizing: border-box; } 
article { display: flex; flex-direction: row; width: 100vw; height: 100vh; } 
aside { display: flex; flex-direction: column; justify-content: space-around; width: 300px; height: 100vh; } 
main { display: flex; flex-direction: column; flex-grow: 1; height: 100vh; } 
#code-html, #code-css, #code-js { padding: 2rem; width: 100%; flex-grow: 1; } 
#code-html { width: 100%; height: 300px; min-height: 30%; background-color: red; } 
#code-css { width: 100%; height: 300px; min-height: 30%; background-color: blueviolet; } 
#code-js { width: 100%; height: 300px; min-height: 30%; background-color: aqua; } 
#main-run { height: 100px; background-color: aquamarine; } 
#main-display { flex-grow: 1; background-color: cadetblue; }

HTML代码 #

<body> 
  <article> 
    <aside> 
      <section id="code-html">section 1</section> 
      <section id="code-css">section 2</section> 
      <section id="code-js">section 3</section> 
    </aside> 
    <main> 
      <section id="main-run">sub-head</section> 
      <section id="main-display">main display</section> 
    </main> 
  </article> 
</body>

问题原因 #

1. 元素尺寸计算冲突：你给三个code区块同时设了height:300px和min-height:30%，再加上padding:2rem，但box-sizing没在这些子元素上生效，导致实际占用高度远超100vh，直接撑破布局。
2. 重复高度设置：aside和main都硬设了height:100vh，但内部元素的强制高度让整体内容溢出，挤压底部区域造成重叠。
3. 盒模型未全局继承：仅给body加box-sizing:border-box，子元素没继承，padding会额外增加元素总尺寸，打破高度限制。

解决方案 #

修改后的CSS代码 #

/* 全局统一盒模型，避免padding/border额外占尺寸 */
* {
  margin: 0;
  box-sizing: border-box;
}

article {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
}

aside {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 300px;
  height: 100%; /* 继承父元素高度，不再硬设100vh */
}

main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%; /* 同上，继承父元素高度 */
}

#code-html, #code-css, #code-js {
  padding: 2rem;
  flex-grow: 1; /* 让三个区块平分aside的可用高度 */
  overflow: auto; /* 内容过多时内部滚动，不影响整体布局 */
}

#code-html { background-color: red; }
#code-css { background-color: blueviolet; }
#code-js { background-color: aqua; }

#main-run {
  height: 100px;
  background-color: aquamarine;
}

#main-display {
  flex-grow: 1;
  background-color: cadetblue;
}

修改说明 #

• 全局设置box-sizing:border-box，确保所有元素的padding和border不会额外增加总尺寸。
• 把aside和main的height:100vh改为height:100%，继承父元素article的100vh高度，避免重复设置导致的冲突。
• 移除三个code区块的固定height:300px，只用flex-grow:1让它们自动平分aside的可用高度，配合justify-content:space-around实现均匀分布。
• 给code区块加overflow:auto，如果内容过多时内部滚动，保证整体布局不溢出。

修改后aside高度不会超过100vh，main会自动占据剩余宽度，所有内容无需滚动条就能完全适配屏幕，底部重叠问题解决。

内容的提问来源于stack exchange，提问作者A. Ranjan