如何让Tailwind的fixed aspect ratio容器不随内容放大？

我用Tailwind 3做了个布局：左侧是文本区域，右侧是固定宽高比的容器，本来右侧能跟着左侧文本的高度自动匹配大小，但往右侧容器里加内容后，它会按设定的宽高比直接放大，完全不受左侧高度约束。试了固定宽度、限高、调网格属性都没用，要么宽高比崩了，要么容器还是会被内容撑大。

核心解决思路 #

让右侧容器的尺寸完全由左侧文本高度决定，同时把内容限制在容器内部，不让内容影响容器本身的尺寸。具体改法如下：

1. 锁死网格行高：给外层网格容器加grid-rows-[1fr]，强制网格的行高由左侧文本（最高的列内容）决定，不让右侧内容插手行高计算。
2. 容器溢出控制：给右侧的宽高比容器加overflow-hidden（要滚动就用overflow-auto），这样内容超出容器时只会被裁剪或滚动，不会撑大容器。
3. 内容容器填充：在右侧宽高比容器里套一个h-full w-full的内层容器，把内容放在这个内层里，确保内容只在容器范围内显示。

修改后的代码示例 #

<div class="grid grid-cols-2 gap-4 p-8">
  <!-- 左侧文本区 -->
  <div class="bg-blue-100 p-4">
    <p>左侧文本，高度随内容变化</p>
    <p>多加点内容测试高度匹配...</p>
    <p>再加点...</p>
  </div>
  <!-- 右侧固定宽高比容器 -->
  <div class="aspect-square bg-red-100 overflow-auto">
    <div class="h-full w-full p-4">
      <p>右侧内容，现在不会撑大容器了</p>
      <p>哪怕加一堆内容...</p>
      <p>内容会在容器里滚动</p>
      <p>继续加内容测试...</p>
      <p>继续加内容测试...</p>
      <p>继续加内容测试...</p>
    </div>
  </div>
</div>

关键细节解释 #

• grid-rows-[1fr]：让网格行高完全由左侧文本的高度决定，右侧容器的高度会和左侧对齐，再通过aspect-square让宽度等于高度，完美维持宽高比。
• overflow-auto：如果内容太多，用户可以滚动查看，不想滚动就用overflow-hidden直接裁剪。
• 内层的h-full w-full：确保内容填满容器空间，不会出现留白，同时把溢出限制在这个内层里，外层容器的尺寸完全不受影响。

这样改完，右侧容器就会一直跟着左侧文本的高度走，宽高比也不会崩，内容再多也只会在容器内部处理，不会撑大容器。

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