如何仅用CSS实现卡片标题高度统一及内容自适应布局

补充说明：更新说明，无需使用flex，grid/subgrid是可行方向。示例使用flex是因为我熟悉该方案。

需要实现以下CSS效果：

• 蓝色标题框与同行内最高的标题框高度保持一致
• 红色内容框自动填充卡片的剩余空间
• 统计卡片均匀填满红色区域

当前布局 #

期望布局 #

我见过用JavaScript实现的方案，但希望尽量不用JS。“期望布局”的截图是给标题框设置固定高度后演示的效果。

现有代码 #

CSS代码

body {
  background-color: #454545;
  color: #fafafa;
}

.cards {
  display: flex;
  gap: 2rem;
}

.card {
  display: flex;
  flex-direction: column;
  width: 300px;
  background-color: green;
  padding: 1em;
  &__title {
    background-color: blue;
    //height: 100px;
    padding: 0 1em;
  }
  &__content {
    height: 100%;
    background-color: red;
    padding: 1em;
  }
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: grey;
  padding: 0 1em;
  min-width: 145px;
  height: 100%;
}

HTML代码

<div class="cards">
  <div class="card">
    <div class="card__title">
      <h3>Title</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 2</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 3</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__title">
      <h3>TItle lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>They're just warming up!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__title">
      <h3>Title</h3>
    </div>
    <div class="card__content">
      <div class="stats">
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 1</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
        <div class="stat">
          <div class="stat__title">
            <h4>Stat 2</h4>
          </div>
          <div class="stat__content">
            <p>Content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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