如何用DIV分组Flexbox元素且保持原有布局（如同无DIV）？

我在Flexbox容器中实现了符合预期的布局（.tool-body可动态显示/隐藏），原有HTML及CSS如下：

原有HTML #

<div class="root">
  <div class="toolbar">toolbar1</div>
  <div class="tool-body">body1</div>

  <div class="toolbar">toolbar2</div>
  <div class="tool-body">body2</div>

  <div class="toolbar">toolbar3</div>
  <div class="tool-body">body3</div>
</div>

原有CSS #

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.tool-body {
  flex: 1 1 100%;
}

为简化应用逻辑（如事件冒泡、jQuery DOM遍历、基于子元素焦点的CSS样式），我想用class为my-group的DIV对元素分组，修改后的HTML及尝试的CSS如下：

修改后HTML #

<div class="root">
  <div class="my-group">
    <div class="toolbar">toolbar1</div>
    <div class="tool-body">body1</div>
  </div>

  <div class="my-group">
    <div class="toolbar">toolbar2</div>
    <div class="tool-body">body2</div>
  </div>

  <div class="my-group">
    <div class="toolbar">toolbar3</div>
    <div class="tool-body">body3</div>
  </div>
</div>

尝试的.my-group CSS #

.my-group {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;  /* 尝试过多种grow/shrink/basis组合 */
}

但此时布局与原效果不同，因.root容器的子元素变为嵌套Flex容器。现需满足：

• 最多可存在1-4个.my-group；
• 所有.tool-body显示时，垂直空间均匀分配给每个.my-group；
• 部分.tool-body隐藏时，保留对应toolbar，剩余空间均匀分配给显示元素。

请问：如何让分组后的布局与无.my-group时一致？能否让浏览器布局时忽略.my-group？还有其他解决方案吗？

方案1：使用display: contents让浏览器"忽略"分组容器 #

这是最简单的方案，display: contents会让.my-group容器本身不参与布局流，其内部的.toolbar和.tool-body会直接成为.root的子元素，完全复刻原有布局效果。

CSS代码 #

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.tool-body {
  flex: 1 1 100%;
}
.my-group {
  display: contents;
}

兼容性说明：该属性不支持IE及旧版Edge，若项目需要兼容这些浏览器，请使用方案2。

方案2：通过Flex属性适配分组布局 #

如果无法使用display: contents，可以通过调整.my-group的Flex属性，结合状态判断来实现一致效果：

基础CSS代码 #

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.my-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0; /* 让包含显示状态.tool-body的分组平分可用空间 */
}
.tool-body {
  flex: 1 1 100%; /* 让body占据分组内的剩余垂直空间 */
}
/* 当分组内的.tool-body隐藏时，分组仅保留toolbar高度 */
.my-group:has(.tool-body:hidden) {
  flex: 0 0 auto;
}

低版本浏览器兼容处理 #

:has()选择器需要现代浏览器支持（Chrome 101+、Firefox 121+、Safari 15.4+）。若需兼容更低版本，可通过JavaScript给隐藏了.tool-body的.my-group添加类名（如collapsed），再修改CSS：

.my-group.collapsed {
  flex: 0 0 auto;
}

对应的JavaScript示例：

// 初始化并监听.tool-body的显示状态变化
document.querySelectorAll('.tool-body').forEach(body => {
  const updateGroupState = () => {
    const group = body.closest('.my-group');
    group.classList.toggle('collapsed', body.hidden);
  };
  // 初始状态设置
  updateGroupState();
  // 监听hidden属性变化
  const observer = new MutationObserver(updateGroupState);
  observer.observe(body, { attributes: true, attributeFilter: ['hidden'] });
});

效果验证 #

两种方案均能满足需求：

• 适配1-4个.my-group的场景；
• 所有.tool-body显示时，各分组均匀分配垂直空间；
• 部分.tool-body隐藏时，对应分组仅保留toolbar高度，剩余空间由显示body的分组平分。

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