如何仅用Flexbox实现Div填充兄弟元素剩余空间？

直接调整CSS属性即可达成目标效果，修改后的代码如下：

.parent {
  display: flex;
  flex-direction: column;
}
.start {
  width: 100%;
  display: flex;
  flex-direction: row;
  /* 让.start自适应父容器空间，为后续位置调整留空间 */
  flex-grow: 1;
}

.left {
  order: 1;
  height: 150px;
  background-color: lightblue;
  /* 预留出.end的高度空间 */
  margin-bottom: 50px;
}
.right {
  order: 2;
  height: 200px;
  background-color: blue;
}
.end {
  height: 50px;
  background-color: red;
  /* 向上移动填补.left下方的空白 */
  margin-top: -50px;
  /* 限制在左侧区域，右侧被.right覆盖 */
  align-self: flex-start;
}

.left, .right, .end {
  width: 50%;
}

实现逻辑 #

1. 移除.start的固定height，改用flex-grow: 1，让它能根据子元素和后续元素的位置自动调整高度。
2. 给.left添加margin-bottom: 50px，专门为.end预留出高度空间。
3. 通过margin-top: -50px将.end向上拉到.left下方的空白处，再用align-self: flex-start确保它只占据左半区域，右半部分会被.right的蓝色块覆盖，完全匹配你想要的布局效果。

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