如何让设置了max-height的div删除内容时仅从底部向上收缩？

这个场景我之前做项目时刚好碰到过！核心问题在于默认情况下，浏览器会让容器在可用空间里自动调整位置（比如如果你的Modal是居中对齐的），导致内容减少时容器上下同时收缩。要让它只从底部往上缩，关键是锚定Modal的顶部位置，同时让内容容器的内容始终从顶部开始排列。

下面给你两种最实用的解决方案：

方案一：固定Modal的顶部位置 + 内容容器用Flex布局 #

首先确保Modal的顶部位置是固定的，而不是通过垂直居中的方式定位；然后让列表容器的内容从顶部开始排列，这样内容减少时，容器高度只会从底部收缩。

示例代码 #

<!-- Modal结构 -->
<div class="modal">
  <h3>我的列表</h3>
  <div class="item-container">
    <div class="list-item">项目1 <button class="remove-btn">移除</button></div>
    <div class="list-item">项目2 <button class="remove-btn">移除</button></div>
    <div class="list-item">项目3 <button class="remove-btn">移除</button></div>
    <!-- 更多列表项 -->
  </div>
</div>

/* Modal基础样式：固定顶部位置，水平居中 */
.modal {
  position: fixed;
  top: 40px; /* 固定Modal到视口顶部的距离 */
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* 列表容器：设置min/max高度，滚动，内容从顶部开始 */
.item-container {
  min-height: 120px;
  max-height: 350px;
  overflow-y: auto;
  /* 关键：用flex让内容始终从顶部排列 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.8rem; /* 可选：给列表项加间距 */
}

.list-item {
  padding: 0.6rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

方案二：调整父容器的垂直对齐方式 #

如果你的Modal是通过父容器（比如body）的Flex布局来居中的，那默认的align-items: center会导致Modal随内容高度变化上下移动。这时候只需要把垂直对齐改成flex-start，再给Modal加个顶部间距即可：

body {
  display: flex;
  justify-content: center; /* 水平居中不变 */
  align-items: flex-start; /* 垂直方向从顶部开始 */
  min-height: 100vh;
  margin: 0;
  padding-top: 40px; /* 给Modal留顶部空间 */
}

.modal {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* 列表容器样式和方案一一致 */
.item-container {
  min-height: 120px;
  max-height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.8rem;
}

关键原理总结 #

1. 锚定顶部位置：不管用position: fixed的top属性，还是父容器的align-items: flex-start，核心都是让Modal的顶部位置不随内容高度变化而移动。
2. 内容从上到下排列：用Flex布局的justify-content: flex-start（或者块级元素的默认流），确保列表项始终从容器顶部开始排列，内容减少时容器高度自然从底部向上收缩。

这样调整后，你移除列表项时，Modal的顶部位置会保持不变，只有底部会随着内容减少向上收缩，完全符合你的需求！

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