如何让Bootstrap中的Div占满行内剩余空间并消除多余空白？

我想要实现如图所示的布局：

目前我已完成大部分内容，仅需让页面中的灰色容器占满所在行的剩余空间，消除容器间的多余空白，仅保留预设间距。以下是我使用Bootstrap 5编写的HTML代码，请问该如何实现需求？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="row gx-2 margin">
  <div class="col-md-4">
    <div class="bg-gray padding-box">
      <p><span class="fw-bold mb-1">"I needed a lawyer to do my will</span> and through CMCs EAP | found a great one that was very professional!”</p>
    </div>
    
    <div class="bg-gray padding-box mt-2">
      <p class="fw-bold mb-1">
        “I bought a new exercise bike and since we now have the Lifestyle benefit, I am eligible for $500 of the cost to be paid back to me. Simple process to get reimbursed!”
      </p>
    </div>
    
    <div class="bg-gray padding-box mt-2">
      <p class="fw-bold mb-1">
        "The annual physical was especially life saving this year because my doctor did a full blood panel and found that my potassium and magnesium were extremely low which could have been a very serious situation. The fact that the visit is free is a plus!”
      </p>
    </div>
  </div>
  
  <div class="col-md-8">
    <div class="row gx-2">
      <div class="col-md-6">
        <div class="bg-gray padding-box">
          <p class="fw-bold mb-1">
            "I found MDLive to be very easy to use and very convenient - especially when you're sick and it's the weekend when most doctor's offices are closed. It's also really nice to have when you are out of town and not familiar with the area or doctors where
            you are."
          </p>
        </div>
        
        <div class="bg-gray padding-box mt-2">
          <p class="fw-bold mb-1">
            "With the new Lifestyle benefit, I bought a rower! From not being active for a few years I'm now rowing 3-4 times per week and love it."
          </p>
        </div>
      </div>
      
      <div class="col-md-6">
        <div class="bg-gray padding-box">
          <p class="fw-bold mb-1">
            "The 401k and ESPP are awesome because CMC matches which makes me feel that the company cares about our future. It's a very simple & easy process to sign up!”
          </p>
        </div>
        
        <div class="bg-gray padding-box mt-2">
          <p class="fw-bold mb-1">
            "MD live has been great! Especially with COVID not wanting to go to a doctor office; you call, and the appointment is done right away. They have treated my issues with great results."
          </p>
        </div>
      </div>
    </div>
    
    <div class="bg-gray padding-box mt-2">
      <p class="fw-bold mb-1">
        "I have been extremely happy with the international pharmacy. I talk it up to any employee I hear who is complaining about the cost of their expensive prescriptions. I've saved enough on one prescription to actually pay for my health insurance for the
        entire year. If that isn't amazing, I don't know what is!”
      </p>
    </div>
  </div>
</div>

当前代码的实现效果存在灰色容器间多余空白的问题，我希望灰色容器占满所在行的剩余空间，仅保留预设间距。

要实现灰色容器占满剩余空间、消除多余空白的需求，可通过Bootstrap 5内置的弹性布局类调整，具体操作如下：

1. 让左右两侧主列高度对齐 #

给左侧的col-md-4和右侧的col-md-8都添加d-flex flex-column类，使列内元素垂直排列并自动填充父容器高度：

<div class="col-md-4 d-flex flex-column">
<!-- 右侧列 -->
<div class="col-md-8 d-flex flex-column">

2. 让所有灰色容器填充剩余空间 #

给每个bg-gray padding-box容器添加flex-grow-1类，让它们自动填充所在列的剩余空间，同时保留mt-2的垂直间距：

<!-- 左侧第一个容器 -->
<div class="bg-gray padding-box flex-grow-1">
<!-- 左侧第二个容器 -->
<div class="bg-gray padding-box mt-2 flex-grow-1">
<!-- 右侧上方两个列内的容器同理，都添加flex-grow-1 -->
<div class="bg-gray padding-box flex-grow-1">
<!-- 右侧下方的容器 -->
<div class="bg-gray padding-box mt-2 flex-grow-1">

3. 让右侧上方的子行高度匹配左侧 #

给右侧上方的row添加h-100类，确保它的高度和左侧主列一致：

<div class="row gx-2 h-100">

4. 补充自定义样式（可选） #

如果bg-gray、padding-box、margin是自定义类，确保基础样式正确：

.bg-gray {
  background-color: #e9ecef;
}
.padding-box {
  padding: 1rem;
  box-sizing: border-box;
}
.margin {
  margin: 1rem;
}

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.bg-gray {
  background-color: #e9ecef;
}
.padding-box {
  padding: 1rem;
  box-sizing: border-box;
}
.margin {
  margin: 1rem;
}
</style>

<div class="row gx-2 margin">
  <div class="col-md-4 d-flex flex-column">
    <div class="bg-gray padding-box flex-grow-1">
      <p><span class="fw-bold mb-1">"I needed a lawyer to do my will</span> and through CMCs EAP | found a great one that was very professional!”</p>
    </div>
    
    <div class="bg-gray padding-box mt-2 flex-grow-1">
      <p class="fw-bold mb-1">
        “I bought a new exercise bike and since we now have the Lifestyle benefit, I am eligible for $500 of the cost to be paid back to me. Simple process to get reimbursed!”
      </p>
    </div>
    
    <div class="bg-gray padding-box mt-2 flex-grow-1">
      <p class="fw-bold mb-1">
        "The annual physical was especially life saving this year because my doctor did a full blood panel and found that my potassium and magnesium were extremely low which could have been a very serious situation. The fact that the visit is free is a plus!”
      </p>
    </div>
  </div>
  
  <div class="col-md-8 d-flex flex-column">
    <div class="row gx-2 h-100">
      <div class="col-md-6 d-flex flex-column">
        <div class="bg-gray padding-box flex-grow-1">
          <p class="fw-bold mb-1">
            "I found MDLive to be very easy to use and very convenient - especially when you're sick and it's the weekend when most doctor's offices are closed. It's also really nice to have when you are out of town and not familiar with the area or doctors where
            you are."
          </p>
        </div>
        
        <div class="bg-gray padding-box mt-2 flex-grow-1">
          <p class="fw-bold mb-1">
            "With the new Lifestyle benefit, I bought a rower! From not being active for a few years I'm now rowing 3-4 times per week and love it."
          </p>
        </div>
      </div>
      
      <div class="col-md-6 d-flex flex-column">
        <div class="bg-gray padding-box flex-grow-1">
          <p class="fw-bold mb-1">
            "The 401k and ESPP are awesome because CMC matches which makes me feel that the company cares about our future. It's a very simple & easy process to sign up!”
          </p>
        </div>
        
        <div class="bg-gray padding-box mt-2 flex-grow-1">
          <p class="fw-bold mb-1">
            "MD live has been great! Especially with COVID not wanting to go to a doctor office; you call, and the appointment is done right away. They have treated my issues with great results."
          </p>
        </div>
      </div>
    </div>
    
    <div class="bg-gray padding-box mt-2 flex-grow-1">
      <p class="fw-bold mb-1">
        "I have been extremely happy with the international pharmacy. I talk it up to any employee I hear who is complaining about the cost of their expensive prescriptions. I've saved enough on one prescription to actually pay for my health insurance for the
        entire year. If that isn't amazing, I don't know what is!”
      </p>
    </div>
  </div>
</div>

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