Flex Box布局中嵌套子div如何实现父容器底部对齐

失效核心原因 #

你所有尝试未达预期的本质是两个配置漏项：

• 中间层级的父元素.progress仅为普通块级元素，高度仅由内部文本"1"撑开（约75px），既没有撑满外层Flex容器分配给它的垂直空间，也没有为内部子元素提供对齐参考上下文
• 之前设置bottom:0、margin-top等配置失效，是因为参考系本身高度不足：哪怕子元素完全贴在这个75px高的块的底部，距离外层Flex容器的底部仍有四百多像素的差距，完全不符合预期

两种可直接复用的实现方案 #

方案1：Flex流实现（适配原有进度条的结构逻辑） #

仅需补全两层元素的对应配置，无需改动原有视觉效果：

• 给.progress添加属性：
  • display: flex：将其设置为内部子元素的Flex布局容器
  • flex-direction: column：设置内部元素为垂直方向排列
  • height: calc(100% - 20px)：扣掉原有样式设置的上下10px的外边距，让它撑满外层Flex容器分配的全部垂直空间，避免高度溢出
• 给.progress-bar添加margin-top: auto：利用Flex布局的自动边距特性，将元素推至父容器的最底部

方案2：绝对定位实现 #

如果不想改动原有Flex流的逻辑，可通过定位实现对齐：

• 给.progress添加属性：
  • position: relative：作为内部子元素绝对定位的参考锚点
  • height: calc(100% - 20px)：和方案1一致，撑满可用垂直高度
• 给.progress-bar添加属性：
  • position: absolute
  • bottom: 0
  • left: 0; right:0：避免绝对定位导致进度条宽度收缩到内容宽度，保证和父容器同宽

修复后的完整可运行代码 #

<style>
.flex-container {
  display: flex;
  height: 500px;
  background-color: #f1f1f1;
}
.flex-container > div {
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.vertical {
    box-shadow: inset 0px 4px 6px #ccc;
}
.progress {
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  box-shadow: inset 0px 4px 6px rgba(100,100,100,0.6);
  /* 新增的核心配置 */
  display: flex;
  flex-direction: column;
  height: calc(100% - 20px);
}   
.progress-bar-info {
  background-color: #5bc0de;
}
.progress-bar {
  box-shadow: inset 0px 4px 6px rgb(100 100 100 / 60%);
  /* 新增的核心配置 */
  margin-top: auto;
}
</style>
<div class="flex-container">
  <div class="progress vertical">1
    <div class="progress-bar progress-bar-info" style="height: 35%;">
      how to align this div to bottom..... ?
    </div>
  </div>    
</div>

注意：如果选择使用绝对定位方案，仅需将.progress-bar的margin-top: auto替换为position: absolute; bottom: 0; left: 0; right: 0即可，两种方案二选一，不要同时启用。

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