如何在不指定高度时实现占窗口50%高的Flex容器垂直滚动？

问题根源在于Flex布局的默认特性：在flex-direction: column的容器中，子元素的min-height默认值为auto，这会让.first-block这类子容器被内部内容撑开，突破父容器分配的高度限制，最终导致overflow:auto无法触发滚动。

只需要给.first-block和.second-block添加min-height: 0，就能强制它们遵守父容器分配的高度配额，内部的Flex子项也能正确计算剩余空间：

* {
  margin: 0;
  box-sizing: border-box;
}

.root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.first-block,
.second-block {
  flex: 1;
  background-color: aqua;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 关键修复样式 */
}

.first-block-header {
  height: 100px;
  background-color: yellow;
}

.first-block-footer {
  height: 100px;
  background-color: coral;
}

.first-block-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.first-block-content {
  height: 700px;
  width: 50px;
  background-color: purple;
}

修改后效果：

• .first-block和.second-block会平分root容器扣除padding和gap后的剩余高度（接近窗口高度的50%）
• .first-block-body会占据header和footer之外的剩余空间，内部内容超出时自动触发垂直滚动

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