tailwindlabs/tailwindcss-aspect-ratio

wrap parent in flex dont show its child with aspect-ratio

apithy-isidro-martinez opened this issue · 2 comments

apithy-isidro-martinez commented

I'm trying to put an icon next to the image, to accommodate flex use but when using it with flex, the image disappears

<div class="flex items-center">
  <svg class="mr-0.5 w-6 h-6 text-gray-400 cursor-move">
  </svg>
  <div class="max-w-xl mx-auto shadow-xl">
    <div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg"><img src="https://images.unsplash.com/photo-....." class="object-cover w-full h-full" /></div>
  </div>
</div>

showcase:
https://play.tailwindcss.com/17QXVqWIPR

erhankaradeniz commented

I think you need to provide a w-full (or any width) to the div having the aspect-ratio classes to fix this.

  • 👍2
RobinMalfait commented

Hey! Thank you for your bug report!
Much appreciated! 🙏

You indeed need an w-full: https://play.tailwindcss.com/DU1WuJGPpG
It's not an issue with the aspect ratio classes themselves, but how the flexbox model works.

  • 🎉2