Flex嵌套容器下多卡片及内部区块等高问题解决方案咨询

首先纠正你现有CSS的语法错误：所有display: flex后面的冒号都写错成了属性分隔符，正确写法应该用分号分隔属性，错误写法会导致flex布局失效，这也是flex:1没起作用的核心原因之一。

要实现所有卡片的.bundle-top和.data区块分别同步高度，最简洁可靠的方案是用CSS Grid布局卡片容器，让每个卡片的对应区块自动对齐到同一网格行，具体实现如下：

步骤1：补充卡片容器的HTML #

假设你的三个卡片是放在同一个容器内，先给容器添加类名：

<div class="card-container">
  <!-- 第一个卡片 -->
  <div class="card ">
    <div class="card__wrapper">
      <div class="bundle-top">
        <span class="bundle-title">Lorem ipsum</span>
        <p class="bundle-description">Lorem ipsum</p>
        <span class="price"><span class="price-value">299</span></span>
        <div class="cta__wrapper">
          <a class="button tiny button__tertiary" href="/">
            <span>Start Trial</span>
          </a>
        </div>
      </div>
      <div class="data">
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 第二个、第三个卡片结构与第一个一致 -->
</div>

步骤2：修正并编写CSS #

/* 卡片容器：Grid实现三列等宽，自动让所有卡片等高 */
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* 卡片间的间距，可按需调整 */
}

/* 卡片基础样式：占满网格单元格高度，可自定义边框、内边距 */
.card {
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

/* 卡片内部容器：Grid分成两行，对应两个区块 */
.card__wrapper {
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自适应内容高度，第二行占剩余空间 */
  height: 100%; /* 让容器占满卡片高度 */
}

/* .bundle-top：自动匹配所有卡片中该区块的最大高度 */
.bundle-top {
  margin-bottom: 1.5rem; /* 和.data区块的间距，可按需调整 */
}

/* .data：占满剩余空间，内容过多时可添加滚动 */
.data {
  overflow-y: auto; /* 可选：内容超出时显示滚动条 */
}

原理说明 #

• 外层card-container用Grid布局，三列等宽，所有卡片会自动继承最高卡片的高度。
• 每个卡片内部的card__wrapper也用Grid布局，分成两行：第一行对应.bundle-top，会自动匹配所有卡片中这个区块的最大高度；第二行对应.data，占满剩余空间。
• 这种纯CSS方案不需要依赖JavaScript，能稳定实现跨容器的区块高度同步，比flex布局更适配这类场景。

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