绝对定位元素为何会影响父容器滚动高度？如何避免该问题？

问题原因 #

你对absolute定位元素脱离文档流的规则理解是正确的：absolute元素确实不会被直接父元素计入高度计算，你遇到的「撑高滚动容器」现象是浏览器滚动高度统计规则导致的：

• 承载绝对定位元素的父容器.icon的overflow属性为默认值visible，允许子元素超出自身边界展示
• 外层#container设置了overflow-y: scroll，浏览器统计滚动容器的scrollHeight时，会将所有在容器范围内的可见内容（包括从其他元素溢出的内容）全部计入统计。你设置的300px高的绝对定位元素从.icon底部溢出的可见部分，被算入了#container的滚动高度，才出现了被absolute元素撑开的效果。

解决方案 #

给作为定位父级的.icon添加overflow: hidden属性，裁剪掉超出其边界的内容，溢出的绝对定位元素部分就不会被外层滚动容器统计到高度中：

.icon {
  width: 120px;
  height: 120px;
  background-color: green;
  position: relative;
  overflow: hidden; /* 新增该行即可 */
}

如果你需要保留绝对定位元素超出.icon的部分可见，同时不撑高滚动容器，可以将绝对定位元素从.icon内移出，直接作为#container的子元素，单独设置定位值即可。

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