如何让flex-grow元素占据隐藏flex项的空间？

核心修改思路 #

• 小屏幕下切换为垂直flex布局，让flex-grow能直接作用于垂直方向，解决row布局下垂直空间分配的问题
• 移除所有固定height，改用flex属性控制各区域的空间占比，隐藏区域B后自动填充剩余空间
• 通过CSS类切换状态，替代直接操作元素样式，更易维护

修改后的完整代码 #

HTML

<body>
  <main>
    <div class="maingrid-wrapper">
      <div class="image maingrid-content">A</div>
      <div class="sidehint maingrid-content" id="hint">B</div>
      <div class="footer-wrapper maingrid-content">
        <input class="bulb-input" id="hint-toggle" type="checkbox" onchange="visCheck()">C
      </div>
    </div>
  </main>
</body>

CSS

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100vh;
  width: 100%;
}
main {
  height: 100%;
  box-sizing: border-box;
}
.maingrid-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
.image {
  flex: 2; /* 大屏幕A占2份宽度 */
  background-color: lightblue;
}
.sidehint {
  flex: 1; /* 大屏幕B占1份宽度 */
  background-color: lightgreen;
}
.footer-wrapper {
  height: 10%;
  width: 100%;
  background-color: lightpink;
  display: flex;
}

@media all and (max-width: 640px) {
  .maingrid-wrapper {
    flex-direction: column; /* 小屏幕改为垂直布局 */
    background-color: lightgrey;
  }
  .image {
    flex: 7; /* 显示B时，A占7份垂直空间 */
  }
  .sidehint {
    flex: 2; /* 显示B时，B占2份垂直空间 */
  }
  .footer-wrapper {
    flex: 1; /* C固定占1份垂直空间 */
    height: auto; /* 取消固定高度，适配flex布局 */
  }
  /* 隐藏B时的样式 */
  .maingrid-wrapper.hide-hint .image {
    flex: 9; /* A占满除C外的所有空间 */
  }
  .maingrid-wrapper.hide-hint .sidehint {
    display: none;
  }
}

JavaScript

function visCheck() {
  const wrapper = document.querySelector('.maingrid-wrapper');
  const isChecked = document.getElementById('hint-toggle').checked;
  wrapper.classList.toggle('hide-hint', !isChecked);
}

// 初始化默认隐藏B
document.querySelector('.maingrid-wrapper').classList.add('hide-hint');

关键修改说明 #

1. 垂直布局适配小屏幕：flex-direction: column让flex属性直接控制垂直空间分配，彻底解决row布局下垂直方向flex-grow失效的问题
2. flex属性替代固定高度：所有区域的空间占比由flex值决定，隐藏B后调整A的flex值，自动填充原本属于B的空间，不会出现灰色残留
3. 类名切换状态：用CSS类控制显示逻辑，避免JS直接操作样式，符合前端开发的分离原则，也更容易扩展样式
4. 简化JS逻辑：直接通过复选框状态切换容器类名，代码更简洁，减少冗余判断

效果验证 #

• 大屏幕：勾选时A、B横向2:1分配空间；未勾选时B隐藏，A占满横向区域，保持原有正常效果
• 小屏幕：勾选时A(7)、B(2)、C(1)垂直排列；未勾选时B隐藏，A占满除C外的所有垂直空间，无灰色残留

内容的提问来源于stack exchange，提问作者j.heindel