如何在Tailwind CSS中创建不受内容影响的固定尺寸div

你的问题核心是容器没有设置明确的固定高度，且内容层未限制溢出，导致内容过多时会撑开容器。可以通过以下调整解决：

关键修改点： #

• 给项目容器（<a>标签）设置固定高度，比如h-[400px]（也可替换为h-96这类Tailwind预设高度类）
• 给内部的内容遮罩层（hover显示的<div>）添加h-full overflow-hidden，确保内容超出时被隐藏，不会撑大容器
• 让中间的<div>继承容器高度，添加h-full

修改后的代码： #

<div className="flex flex-wrap -m-4">
      {projects.map((project) => (
        <a 
          href={project.link}
          key={project.image}
          rel="noopener noreferrer"
          target="_blank"
          className="flex w-1/2 h-[400px] p-4"> <!-- 设置固定高度 -->
          <div className="flex relative h-full"> <!-- 继承父级高度 -->
            <img
              alt="gallery"
              className="absolute inset-0 w-full h-full rounded-2xl object-cover object-center border-4 border-white"
              src={project.image}
            />
            <div className="px-8 py-10 relative z-0 w-full h-full rounded-2xl border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100 overflow-hidden"> <!-- 添加h-full和overflow-hidden -->
              <h2 className="tracking-widest text-sm title-font font-medium text-orange-700 mb-1">
                {project.subtitle}
              </h2>
              <h1 className="title-font text-lg font-medium text-white mb-3">
                {project.title}
              </h1>
              <p className="leading-relaxed">{project.description}</p>
            </div>
          </div>
        </a>
      ))}
    </div>

原理说明： #

1. 固定高度h-[400px]直接锁定每个项目容器的高度，不会随内部内容变化
2. h-full让内部的图片层和内容层都填满容器高度，保持布局一致
3. overflow-hidden确保内容过多时不会超出容器，而是被裁剪，避免撑开容器

如果需要更灵活的比例（比如正方形、16:9），可以用Tailwind的aspect-*类替换固定高度，比如aspect-square，这样宽度固定为w-1/2的情况下，高度会自动和宽度保持1:1比例，同样不受内容影响。

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