如何在React+Tailwind CSS的Flex布局中动态调整容器高度？

核心需求 #

多张定价卡片的功能点区域（第三行）需根据内容最多的卡片自动调整高度，实现所有卡片功能区高度统一对齐。

问题分析 #

当前PricingCardRow仅循环渲染独立卡片，未使用支持等高布局的容器；PricingCard内部也未设置弹性布局分配空间，导致功能区高度随各自内容变化，无法对齐。

解决方案 #

通过Grid/Flex容器统一卡片高度 + 卡片内部弹性布局分配空间实现功能区等高：

步骤1：修改PricingCardRow，添加等高布局容器 #

使用Grid布局（原生支持等高单元格，推荐），将所有卡片包裹在Grid容器中：

import React from 'react';
import PricingCard from './PricingCard';
import pricingData from './pricingData';

const PricingCardRow = () => {
  return (
    {/* 按需求设置列数，md:grid-cols-3表示中等屏幕以上显示3列 */}
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {pricingData.map((pricing, index) => (
        <PricingCard
          key={index}
          title={pricing.title}
          price={pricing.price}
          users={pricing.users}
          features={pricing.features}
          link={pricing.link}
          btnText={pricing.btnText || 'Get Started'}
          bgColor={pricing.bgColor || 'bg-theme-blue'}
          textColor={pricing.textColor || 'text-white'}
        />
      ))}
    </div>
  );
};

export default PricingCardRow;

步骤2：修改PricingCard，设置内部弹性布局 #

让卡片整体成为弹性列容器，并让功能区填充剩余空间：

1. 修改最外层div的className，添加弹性布局属性：

<div className={`bg-white overflow-hidden flex flex-col h-full`}>

2. 调整功能区（第三行）的布局，设置flex-grow:1让其填充卡片剩余高度：

{/* row3 for bullet points */}
<div className="flex flex-row flex-grow">
  {/* LHS WITH CONTENT */}
  <div className="w-11/12 flex flex-col bg-pricing-gray">
    {/* 若需内容顶格显示，添加align-self-start */}
    <ul className="list-disc list-inside space-y-4 px-4 py-8 w-full align-self-start">
      {features.map((feature, index) => (
        <li key={index}>{feature}</li>
      ))}
    </ul>
  </div>
  {/* RHS ONLY BG */}
  <div className="w-1/12 bg-white"></div>
</div>

替代方案：使用Flex布局实现 #

若偏好Flex布局，可修改PricingCardRow为Flex容器：

<div className="flex flex-wrap gap-6">
  {pricingData.map((pricing, index) => (
    <PricingCard
      key={index}
      {...pricing}
      btnText={pricing.btnText || 'Get Started'}
      bgColor={pricing.bgColor || 'bg-theme-blue'}
      textColor={pricing.textColor || 'text-white'}
    />
  ))}
</div>

同时给PricingCard的最外层div添加flex-1 min-w-[300px]属性，确保卡片在换行时保持合适宽度并填充空间：

<div className={`bg-white overflow-hidden flex flex-col h-full flex-1 min-w-[300px]`}>

原理说明 #

• Grid/Flex容器会强制同一行内的所有卡片高度统一，对齐到内容最高的卡片；
• 卡片内部使用flex flex-col布局，功能区设置flex-grow:1后，会自动填充卡片的剩余空间，从而实现所有功能区高度一致。

内容的提问来源于stack exchange，提问作者Muhammad Omer Baig