如何使用Flexbox让嵌套Div结构中的内层Div换行至新行

我希望内层div（Mem 3）能换行至新行，位于Mem 1的正下方，且无论如何都不想改变div结构。

当前效果：

期望效果：

现有代码 #

CSS #

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  border: solid blue;
}

.flex-fgc {
  border: solid blue;
}

.flex-inner-gc {
  border: solid blue;
}

HTML #

<div class='flex-container'>
  <div class='flex-child'>
    Mem 1
  </div>
  <div class='flex-fgc'>
    <div>
      Mem 2
    </div>
    <div class='flex-inner-gc'>
      Mem 3
    </div>
  </div>
</div>

我曾尝试为flex-inner-gc设置flex: 1 1 100;属性，但未达到预期效果。

解决方案 #

无需修改HTML结构，只需调整CSS即可实现需求：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  border: solid blue;
}

.flex-fgc {
  border: solid blue;
  display: contents; /* 让该容器的子元素直接成为外层flex容器的子项 */
}

.flex-inner-gc {
  border: solid blue;
  flex: 0 0 100%; /* 强制占据整行宽度，触发换行 */
}

实现原理 #

• display: contents：消除.flex-fgc作为flex子项的独立身份，使其内部的Mem2和Mem3直接参与外层.flex-container的布局。
• flex: 0 0 100%：强制Mem3占据整行宽度，触发flex容器的换行规则，让它自动换行到Mem1的正下方。

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