Needs h-0 class on the wrapping div regardless?

[exalted]

Watching https://www.youtube.com/watch?v=NX_NW6bt6_s it seemed we could remove also h-0 from the parent element, however, if I do that, then the aspect ratio is not always respected.

In short, I have a grid of 3 columns, where the 2nd column spans to 2:

<div class="grid grid-cols-3">
  <div class="aspect-w-1 aspect-h-1">
    <img
      class="object-cover rounded-lg shadow-lg"
      src="/assets/img/freud.jpeg"
      alt=""
    />
  </div>
  <p class="col-span-2 font-light">
    <span class="italic font-serif"
      >Some text</p>
</div>

So, ideally, I'd expect the image to appear as a square no matter what the viewport size is, however, check out this screen recording as the screen size gets narrower and narrower:

As you can see, Freud's photo, at some point isn't square anymore!

If I add h-0 to the parent div however, so that the code above becomes:

<div class="grid grid-cols-3">
  <div class="h-0 aspect-w-1 aspect-h-1">
    <img
      class="object-cover rounded-lg shadow-lg"
      src="/assets/img/freud.jpeg"
      alt=""
    />
  </div>
  <p class="col-span-2 font-light">
    <span class="italic font-serif"
      >Some text</p>
</div>

Then it works as advertised:

So, I wonder, is this a bug or am I missing something?

Thanks!

[hubionmac]

I had the same issue in a grid (and flex while testing) with a table element but just in Safari. (https://play.tailwindcss.com/Z4HgPoie2d)
h-0 just seems to force the browser to calculate the height of an object inside when the browser just isn't smart enough to do so

[adamwathan]

Hey! This is just a flexbox quirk as mentioned, have to deal with the same stuff when writing vanilla CSS 👍 Nothing for us to really change in the library I don't think so going to close but hopefully that's helpful.

[exalted]

@adamwathan no strong opinions here however, I would like to argue that, although not a tailwind bug per se, IMO tailwind should opt into maintaining the aspect ratio by default (i.e. added h-0 behavior).

After all, that's how this plugin is "advertised" in https://www.youtube.com/watch?v=NX_NW6bt6_s: it does remove h-0 from the parent element and replaces it with aspect-*.