Flex布局中如何移除无内容元素的gap间隙并适配剩余高度？

问题描述 #

创建包含可选header与主内容区的模板，要求：

• header高度随内容自适应
• 主内容区填充父容器剩余高度
• 仅当header和主内容区同时存在时，两者之间保留16px间距；header不存在时，无多余间距

当前使用display:flex与gap属性实现布局，但header不存在时gap仍会残留，需要解决该问题。

原始代码 #

CSS #

.parent {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: green;
}

.main {
  flex-grow: 2;
  background: red;
}

.header {
  background: blue;
}

.big {
  height: 500px;
  width: 60px;
}

HTML #

<div class="big">
  <div class="parent">
    <div class="header"></div>
    <div class="main"></div>
  </div>
</div>

解决方案 #

方案一：相邻兄弟选择器替代gap（兼容性最优） #

去掉父容器的gap，改用相邻兄弟选择器，仅当header后紧跟main时，给main添加上边距，完美实现“仅两元素共存时保留间距”的需求，同时主内容区通过flex-grow:1占满剩余高度。

修改后的CSS：

.parent {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: green;
}

.main {
  flex-grow: 1; /* 用1即可占满剩余空间，无需设为2 */
  background: red;
}

.header {
  background: blue;
}

/* 仅当header和main共存时，添加间距 */
.header + .main {
  margin-top: 16px;
}

.big {
  height: 500px;
  width: 60px;
}

方案二：CSS :has选择器（现代浏览器适用） #

利用:has选择器检测父容器是否同时包含header和main，仅满足条件时设置gap。注意该特性仅支持现代浏览器（Chrome 105+、Firefox 121+等）。

修改后的CSS：

.parent {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: green;
}

/* 当父容器同时存在header和main时，设置gap */
.parent:has(.header + .main) {
  gap: 16px;
}

.main {
  flex-grow: 1;
  background: red;
}

.header {
  background: blue;
}

.big {
  height: 500px;
  width: 60px;
}

方案三：Grid布局实现 #

用Grid布局也能达成需求，设置网格行高为auto（适配header高度）和1fr（占满剩余空间），同样通过相邻兄弟选择器控制间距：

修改后的CSS：

.parent {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  background: green;
}

.main {
  background: red;
}

.header {
  background: blue;
}

.header + .main {
  margin-top: 16px;
}

.big {
  height: 500px;
  width: 60px;
}

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