在顺风中包含固定侧倾箱的内容

Question

我有一个固定的纵横比面积在我的布局中使用尾风3。

<div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-1">
    <div class="text-xl text-gray-700 lg:text-lg [&>p]:py-5 [&>p]:pl-5">
        <p>Lorem ipsum</p>
    </div>
    <div class="grid place-items-center">
        <div class="aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto">
            <div>
                wevs
                wevs
                wevs
            </div>
        </div>
    </div>
</div>

看起来是这样的，这就是我想要的，不管左边的文本有多长，底部都是平行的。如果我在左边添加更多的文本，右边刻度上固定的方面区域就会增加到左侧内容的高度。

​

​

所以我希望固定的纵横比区域包含它的内容，而不改变大小，但是当我把一些额外的内容放进去，整个容器就会增长。不可否认，它生长在固定的纵横比，所以这是很好的，但我宁愿它根本不增长！

​

​

这里有一个指向尾风播放的完整示例的链接：https://play.tailwindcss.com/oNjWgFb2AW

使用宽屏幕(1440 if )，如果您继续添加"wevs“，您将看到效果。

我已经尝试了很多方法来修复宽度，也尝试过限制高度，烦扰网格值，但我没有任何运气。我尝试过的每一件事似乎要么打破了高宽比部分，要么容器仍然与内容一起放大。

Answer 1

我添加了max-h-0，它可以工作

...
<div class="max-h-0 aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto">
...

下面是您的游戏代码示例

https://play.tailwindcss.com/32quTcDj51?size=1440x803