Why does my image overflow its parent div with another content inside?

Why does my image overflow its parent div in Tailwind CSS?

I have a <div> with a fixed size and a border, containing both text and an image. However, the image overflows outside the red border. I want the image to fit inside the <div> while keeping the text above it.

Current Code (with Tailwind CSS):

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div class="size-32 border-4 border-red-500 p-2">
  <span>Other content</span>
  <img src="https://plus.unsplash.com/premium_photo-1679830513873-5f9163fcc04a?q=80&w=2454&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="size-full" />
</div>

Screenshot of result here

Issue:

• The image overflows the red-bordered <div>, instead of staying contained within it.
• I assume size-full should make the image take the available space, but it seems to go beyond the parent.

Expected Behavior:

• The text should be above the image.
• The image should fit within the red-bordered <div> without overflowing.

Did I miss something or this is a real problem?

My goal is to make a full dynamic height screen home page section on a web site, with a height fixed header and an image, something like this:

<div class="max-h-dvh">
  <div class="h-96">My height fixed content</div>
  <img [src]="url" class="size-full" />
</div>