Tailwind/CSS：为什么我的div不适合图像的宽度而是扩展到更长的宽度？

Question

我的 div（以黄色背景突出显示）正在水平扩展，即它的宽度正在增加。我认为它正在增加到图像的整个宽度，即 800px + 填充。如何确保该 div 的宽度和高度等于缩小后的包含图像？这样带有文本“Test”的下一个元素就显示在它旁边。谢谢！

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

<div class="flex max-h-96">
  <div class="flex w-fit bg-yellow-100 p-2">
    <img src="https://placehold.co/800x1000" alt="MAIN_IMAGE" />
  </div>
  <div>Test</div>
</div>

Answer 1

直到有人提出实际的解决方案，我最终按照评论中@cloned的建议删除了div，并使用最大宽度而不是具有纵横比的最大高度。

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

<div class="flex max-w-80 p-2">
  <img class="aspect-[4/5]" src="https://placehold.co/800x1000" alt="MAIN_IMAGE" />
  <div>Test</div>
</div>