如何根据列表li元素数量及占用空间动态调整div容器高度

当前列表容器.list设置了固定最小高度115px、最大高度200px，内部li元素数量动态变化时，列表项较少的场景下容器会出现多余留白，需要实现容器高度自动适配列表项实际高度，无多余预留空间，总高度超200px时再触发滚动。

HTML 结构（index.html） #

<div class="list">
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
</div>

原有样式（style.css） #

.list {
    display: flex;
    flex-direction: column;
    max-height: 200px !important;
    overflow: auto;
    min-height : 115px;
}

多余留白的核心原因是写死了min-height: 115px，强制容器在内容高度不足115px时也要撑到该高度，直接调整最小高度规则、增加内容适配高度属性即可，修改后样式如下：

.list {
    display: flex;
    flex-direction: column;
    max-height: 200px !important;
    overflow: auto;
    /* 移除原固定115px最小高度，取消强制撑高的规则 */
    min-height: 0;
    /* 让容器高度默认跟随内部内容实际高度自适应 */
    height: fit-content;
}

效果说明 #

• 列表项总高度小于200px时，容器会完全贴合内容高度，不会出现多余留白
• 列表项总高度超过200px时，容器自动锁定200px高度，内部出现滚动条，不影响长列表浏览
• 如果需要避免列表为空时容器完全塌陷，可以把min-height设置为单个列表项的高度即可，不要设置过大的固定值。

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