如何使子div高度延伸至父div底部？（不使用绝对定位）

嘿，我明白你想让.basicInfo的底部和.core的底部对齐，还不想用position: absolute的困扰！其实Flex布局完全能解决这个问题，只是你之前的用法没到位，我来给你拆解清楚。

问题根源 #

你之前尝试了display: flex但没生效，是因为没有给父容器.core设置正确的Flex属性：默认Flex是横向排列的，而且没让子元素自动填充剩余空间。另外position: relative搭配bottom: 0%只会让元素相对于自己的原始位置下移，没法让它撑到父容器底部；margin-bottom: 0只是清除外边距，不影响高度填充。

正确的解决方案 #

只需要修改.core和.basicInfo的CSS属性，就能实现需求：

修改后的CSS代码 #

.core {
  height: 200px;
  background-color: yellow;
  /* 添加Flex布局，让子元素垂直排列 */
  display: flex;
  flex-direction: column;
}
.boxName {
  display: block;
  position: relative;
}
.boxName span {
  background-color: black;
  color: white;
}
.basicInfo {
  /* 让这个div填充父容器剩余的所有空间 */
  flex: 1;
  width: 30%;
  background-color: green;
}

对应的HTML代码（无需修改） #

<div class="core">
  <div class="boxName"><span>Title</span></div>
  <div class="basicInfo">
    How to set height of this div to the bottom of core div?
  </div>
</div>

原理说明 #

1. 给.core设置display: flex; flex-direction: column;，让内部的两个子div垂直排列。
2. 给.basicInfo添加flex: 1，这个属性会让它自动占据父容器中除了.boxName之外的所有剩余空间，自然就会让它的底部和.core的底部对齐了。

这样既满足了你的需求，又不用依赖position: absolute，布局也更灵活！

内容的提问来源于stack exchange，提问作者Marcin Gałązka