实现底部垂直对齐，顶部Div自动溢出（移除固定高度限制）

我来帮你搞定这个布局需求！你想要的效果完全可以通过Flexbox布局轻松实现，而且能完美去掉.top的固定height属性，同时满足两个核心要求：.bottom垂直对齐容器底部，.top自动填充剩余空间并支持垂直溢出滚动。

修改后的完整代码 #

<style>
.mycontent {
  border: 1px solid;
  width: 300px;
  margin: auto;
  height: 250px;
  display: flex; /* 添加flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
}
.top {
  overflow-x: hidden;
  overflow-y: auto;
  margin: 10px;
  border: 2px solid;
  flex: 1; /* 自动填充剩余空间，替代固定height */
}
.bottom {
  border: 1px solid red;
}
</style>
<div class="mycontent">
  <div class="top">
    <br>content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>more content
  </div>
  <div class="bottom">底部元素</div>
</div>

关键改动说明 #

• 给.mycontent设置Flexbox布局：通过display: flex和flex-direction: column，让容器内的子元素（.top和.bottom）垂直方向排列，这是实现自适应布局的核心。
• 给.top添加flex: 1：这个属性会让.top自动占据容器中除了.bottom之外的所有剩余空间，彻底替代原来的固定height: 210px。同时保留overflow-y: auto，当.top内的内容超出其可用空间时，会自动出现垂直滚动条。
• .bottom无需额外调整：在垂直方向的Flex布局中，未设置flex属性的元素会保持自身高度，并且自动对齐到容器的底部。

这样修改后，不管.top内的内容多少，.bottom都会稳稳贴在容器底部，.top则会自适应填充剩余空间，内容过多时也能正常滚动，完全符合你的需求！

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