Flex Wrap为何忽略空白空间？Flex布局排列异常求助

需求说明 #

需实现布局：左侧为高度2h的垂直div，右侧上方是高度h的水平div，右侧下方是尺寸更小的div。当前代码中第三个div（橙色）跑到第一个div（绿色）下方，不符合预期，且禁止嵌套容器、禁止使用绝对定位（需支持动态生成div）。

原代码问题分析 #

原Flex布局采用flex-wrap: wrap按行排列元素：绿色div占33%宽度、400px高度，蓝色div占66%宽度、200px高度，换行后橙色div只能从新行起始，自然落到绿色div下方，无法填充蓝色div下方的右侧空间。

最佳解决方案：Grid布局（无需嵌套容器） #

Grid布局可直接在父容器中定义网格区域，精准控制每个子元素的位置，完美适配动态生成div的需求：

CSS代码 #

.container {
  display: grid;
  /* 定义两列：左侧占33%，右侧占66% */
  grid-template-columns: 33% 66%;
  /* 定义两行：每行高度200px，总高度400px对应需求中的2h */
  grid-template-rows: 200px 200px;
  gap: 0; /* 可选，移除元素间默认间隙 */
}

.first {
  background-color: #0afc12;
  /* 绿色div占据第一列的两行空间 */
  grid-row: 1 / span 2;
}

.second {
  background-color: #17cfe3;
  /* 蓝色div定位到第二列第一行 */
  grid-column: 2;
  grid-row: 1;
}

.third {
  background-color: #fcba03;
  /* 橙色div定位到第二列第二行 */
  grid-column: 2;
  grid-row: 2;
}

HTML代码（无需修改） #

<div class="container">
  <div class="first">a</div>
  <div class="second">b</div>
  <div class="third">c</div>
</div>

方案说明 #

• 通过grid-template-columns和grid-template-rows直接定义网格的行列尺寸，精准匹配需求中的高度比例与宽度分配。
• grid-row属性让绿色div跨两行，占据左侧全部高度；蓝色、橙色div分别填充右侧上下两行，无需嵌套任何容器。
• 完全支持动态生成div，只需保持类名对应即可，无需调整DOM结构。

备选Flex兼容方案（适配旧环境） #

若必须使用Flex布局，可通过固定容器高度+margin-left: auto实现，但维护性略逊于Grid：

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px; /* 固定总高度为2h */
}

.first {
  background-color: #0afc12;
  flex-basis: 33%;
  height: 100%; /* 占满容器总高度 */
}

.second {
  background-color: #17cfe3;
  flex-basis: 66%;
  height: 50%; /* 占容器高度的一半 */
}

.third {
  background-color: #fcba03;
  flex-basis: 33%;
  height: 50%; /* 占容器高度的一半 */
  margin-left: auto; /* 强制元素靠右对齐 */
}

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