如何阻止父div被其子元素高度撑开？附CSS与HTML代码示例

• 内置标签默认边距触发外边距塌陷：h1、p标签自带默认上下外边距，块级元素的外边距会在父元素没有border、padding、非visible overflow的情况下溢出到父级.child外部，额外增加了.child实际占用的空间，导致父容器被撑高。
• 内容溢出未限制：.child仅设置了固定高度，但默认overflow: visible，内部内容总高度超过设定的20%时，内容会溢出容器，视觉和布局层面都会出现容器被撑开的效果。
• 百分比高度依赖缺失：百分比高度需要基于最近一级设置了明确高度的父元素计算，如果#container的上层元素（html、body）没有设置明确高度，你的百分比高度规则会失效，容器高度会直接由内容决定。

直接修改CSS如下即可：

/* 补充根元素高度，确保百分比高度计算生效 */
html, body {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

#container {
  height: 70%;
  background-color: red;
}

#childContainer {
  height: 100%;
  overflow: scroll;
  background-color: blue;
}

.child {
  height: 20% !important;
  /* 阻止外边距塌陷 + 限制内容溢出不撑高容器 */
  overflow: hidden;
  /* 如果需要展示溢出内容，可替换为overflow: auto，超出时自动出现滚动条 */
}

/* 可选：如果不需要保留h1、p的默认边距，直接重置也可以解决塌陷问题 */
/*
.child h1, .child p {
  margin: 0;
}
*/

调整后.child高度会严格限制为父容器高度的20%，内部元素的外边距不会溢出到容器外，内容溢出也不会撑高父级，childContainer高度会稳定保持为#container高度的100%，超出的内容通过预设的overflow: scroll滚动展示。

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