My div (highlighted with background yellow) is expanding horizontally i.e., it’s width is increasing. I think it is increasing to the full width of the image i.e., 800px + padding. How can I make sure this div’s width and height is equal to the shrunk containing image? So that the next element with text- "Test" is displayed right next to it. Thanks!
<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>>Solution :
I think the m-h tailwind property is causing the problem. Set its height not its max-height. Also make sure the both the image and the image’s parent take the the full height of each their parents.
<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<div class="flex h-96"> <!-- don't use max height -->
<div class="bg-yellow-100 h-full p-2"> <!-- let this element take the full height of its parent -->
<img class="h-full" src="https://placehold.co/800x1000" alt="MAIN_IMAGE" /> <!-- and this one too -->
</div>
<div>Test</div>
</div>