如何实现表格单元格内首个div居顶、末尾div居底且无重叠？

需求：表格单元格内包含两个div，需实现首个div对齐单元格顶部、最后一个div对齐单元格底部，且单元格高度较小时两个div不重叠。

此前方案的问题 #

• 绝对定位方案：为单元格设相对定位、底部div设绝对定位，在单元格高度足够时有效，但高度较小时两个div会重叠——因为绝对定位元素脱离文档流，不占用布局空间。
• Chrome兼容的Flexbox方案：通过给<td>设置height: 0px实现效果，但该写法依赖Chrome特定的表格渲染逻辑，在Firefox中无效。

跨浏览器兼容的解决方案 #

利用Flexbox的标准特性结合表格单元格的正常布局逻辑，无需依赖浏览器特定设置：

CSS 代码 #

.left-cell {
  vertical-align: top; /* 覆盖表格单元格默认的垂直居中对齐 */
}

.cell-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 让容器占满单元格的可用高度 */
}

.last-div {
  margin-top: auto; /* 自动顶边距将元素推至容器底部 */
}

原理说明 #

1. 为单元格设置vertical-align: top，确保容器从单元格顶部开始布局；
2. 容器设为垂直方向的Flex布局，并占满单元格高度：当单元格被右侧长内容撑开时，容器获得足够高度；当单元格高度较小时，容器高度自动适配两个div的总高度；
3. 底部div通过margin-top: auto，在Flex容器的垂直空间中自动填充上方空白，从而对齐到容器（即单元格）底部。

该方案在Chrome、Firefox等主流浏览器中均能正常工作，且避免了元素重叠问题。

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