如何用Flex或Bootstrap工具类实现左侧满高div+右侧上下双div布局

我有4个div，其中一个作为父级背景div，内部包含另外3个子div。需求为：左侧的大div需占满父级全部高度，右侧的两个小div分别居上和居下。请问如何用Flex实现该布局？若仅使用Bootstrap工具类实现则更佳。

预期布局效果：

当前代码：

CSS #

.brown {
  display: flex;
  width: 300px;
  height: 170px;
  background: brown;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

HTML #

<div class="brown">
  <div class="yellow">
    <div class="green">
      <div class="blue">
      </div>
    </div>
  </div>
</div>

一、纯Flex实现 #

先调整HTML结构，把父级.brown的直接子元素改成三个（左侧黄色大div、右侧绿色/蓝色小div），不需要嵌套，再通过Flex属性实现布局：

修改后代码 #

CSS

.brown {
  display: flex;
  width: 300px;
  height: 170px;
  background: brown;
  gap: 10px; /* 可选，子元素间添加间距 */
}

.yellow {
  background: yellow;
  flex: 1; /* 占满父容器剩余宽度，高度自动跟随父容器 */
}

.right-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让两个小div上下分布 */
  width: 100px; /* 右侧容器宽度，按需调整 */
}

.green, .blue {
  width: 100%;
  height: 70px; /* 小div高度，按需调整 */
}

HTML

<div class="brown">
  <div class="yellow"></div>
  <div class="right-group">
    <div class="green"></div>
    <div class="blue"></div>
  </div>
</div>

核心逻辑 #

• 父容器.brown启用Flex布局，子元素默认横向排列。
• 左侧黄色div用flex: 1自动填充剩余宽度，高度随父容器拉伸。
• 右侧用容器包裹两个小div，设置为纵向Flex布局，再通过justify-content: space-between让两个小div分别贴紧容器顶部和底部。

二、Bootstrap工具类实现 #

用Bootstrap 5的内置工具类可以零自定义CSS实现，只需调整HTML结构：

HTML代码 #

<div class="d-flex" style="width: 300px; height: 170px; background-color: brown; gap: 10px;">
  <div class="flex-grow-1" style="background-color: yellow;"></div>
  <div class="d-flex flex-column justify-content-between" style="width: 100px;">
    <div style="background-color: green; height: 70px;"></div>
    <div style="background-color: blue; height: 70px;"></div>
  </div>
</div>

工具类说明 #

• d-flex：将元素设为Flex容器。
• flex-grow-1：让左侧div占据父容器剩余宽度。
• flex-column：右侧容器改为纵向排列子元素。
• justify-content-between：让右侧两个小div上下分布，中间自动留白。

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