Why Are All Cards of Equal Height Despite Content Variation?

Question

I'm working on a reviews section in my React application using Tailwind CSS, where I want each review card to adjust its height based on the amount of text it contains. However, despite using a flexbox layout, all the cards are displaying at equal height, which is not the behavior I expect.

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>
  );
}

• Ensured that the card div does not have any flex properties that could cause height equalization.
• Verified that there are no min-height or max-height styles applied globally or inherited from parent elements.
• Tested with varying lengths of content in comment.comment, but the issue persists. Question: What changes can I make to allow each review card to have a height that adjusts independently based on its content? Are there specific Tailwind CSS classes or styles that I should implement to achieve this behavior?

Answer 1

Flex children will expand by default to the height of the row which makes them the same height. (align-items: stretch)

To make them take their actual height you need align-items: flex-start for which Tailwind has a class items-start

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 items-start 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>