如何实现绝对定位元素内容兼具滚动功能与高度自适应？

直接用top/left/right固定边距 + max-height限制最大高度 + overflow:auto的组合就能实现需求，具体CSS代码如下：

.data {
  position: absolute;
  /* 固定上、左、右的0.7em边距，不设置bottom让高度由内容决定 */
  top: 0.7em;
  left: 0.7em;
  right: 0.7em;
  /* 计算最大高度：容器高度减去上边的0.7em，确保元素不会超出容器范围 */
  max-height: calc(100% - 0.7em);
  /* 内容超出最大高度时自动显示滚动条 */
  overflow: auto;
}

原理说明 #

• 不设置bottom时，绝对定位元素的高度默认由内部内容撑开，完美适配少量内容时的自动收缩需求。
• max-height: calc(100% - 0.7em)限制了元素的最大高度——这里的100%指父容器的高度，减去上边的0.7em后，元素最多只能占满容器除上边距外的空间，不会超出容器边界。
• 配合overflow: auto，当内容高度超过max-height时，自动出现滚动条，不会导致内容被隐藏。

为什么原来的写法不行？ #

• 用inset: 0.7em 0.7em auto 0.7em时，元素没有最大高度限制，内容过多会直接超出父容器范围，若父容器设置了overflow: hidden，超出部分就会被裁剪，看起来和overflow: hidden效果一致。
• 用inset: 0.7em 0.7em 0.7em 0.7em时，元素高度被强制固定为「父容器高度 - 1.4em」，不管内容多少都会保持这个高度，自然无法收缩。

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