尽管内容有所不同，但为什么所有卡片的高度都相同？

Question

我正在使用 Tailwind CSS 在 React 应用程序中创建评论部分，我希望每个评论卡根据其包含的文本量调整其高度。然而，尽管使用了弹性盒布局，所有卡片都以相同的高度显示，这不是我期望的行为。

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 (
    <div className="flex justify-center flex-wrap gap-3">
      {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>
  );
}

• 确保卡片 div 没有任何可能导致高度均衡的 Flex 属性。
• 已验证没有全局应用或从父元素继承的最小高度或最大高度样式。
• 用comment.comment中不同长度的内容进行了测试，但问题仍然存在。 问题： 我可以进行哪些更改，以允许每张评论卡的高度根据其内容独立调整？我是否应该实现特定的 Tailwind CSS 类或样式来实现此行为？

Answer 1

我觉得它们的大小不一样

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' },
];

const el = document.createElement('div')
el.innerHTML = ReviewSection(comments)

document.body.appendChild(el)

function ReviewSection(comments) {
  return `
    <div class="flex justify-center flex-wrap gap-3">
      ${comments.map(comment => `<div
          key=${comment.id}
          class="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 class="p-5">
            <h1 class="font-semibold">${comment.title}</h1>
            <p class="text-sm mt-5">${comment.comment}</p>
          </div>
          <div class="px-5 pb-3 text-sm">
            <p class="text-gray-600">${comment.date}</p>
          </div>
        </div>`)}
    </div>
    `
}

<script src="https://cdn.tailwindcss.com"></script>