React+Tailwind CSS中内容不同但卡片等高的问题解决方法

你的问题根源在于Flex容器的默认行为：flex容器的align-items属性默认值是stretch，这会让所有子元素（评论卡片）自动拉伸到容器内最高元素的高度，导致所有卡片高度统一。

修改方案 #

给父级Flex容器添加items-start类，让子元素根据自身内容高度自适应，不再被强制拉伸：

修改后的完整代码：

import React from 'react';

const comments = [
  { id: 1, name: 'User 1', title: 'Review Title 1', comment: 'This is a short comment.', date: '2024-10-11' },
  { id: 2, name: 'User 2', title: 'Review Title 2', comment: 'This is a much longer comment to test how the card height adjusts based on content. We want to see if it affects the layout.', date: '2024-10-11' },
];

export default function ReviewSection() {
  return (
    {/* 添加 items-start 类 */}
    <div className="flex justify-center flex-wrap gap-3 items-start">
      {comments.map((comment) => (
        <div
          key={comment.id}
          className="bg-gray-100 w-[90%] mx-auto mb-5 md:mx-0 md:w-[40%] lg:w-[30%] rounded-3xl border border-gray-300 shadow-xl"
        >
          <div className="p-5">
            <h1 className="font-semibold">{comment.title}</h1>
            <p className="text-sm mt-5">{comment.comment}</p>
          </div>
          <div className="px-5 pb-3 text-sm">
            <p className="text-gray-600">{comment.date}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

额外确认点 #

1. 确保评论卡片本身没有设置h-full、min-h-[xxx]这类强制高度的类（你已排查过，此处再次确认即可）
2. 如果后续需要调整卡片的垂直对齐方式，还可以按需使用items-center、items-end等类。

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