aspect-[value] fails to render correctly inside flex containers with min-w-0 in Tailwind CSS v3.4+

[ajaychip]

name: Bug report
about: If you’ve already asked for help with a problem and confirmed something is broken with Tailwind CSS itself, create a bug report.
title: aspect-[value] breaks layout when combined with min-w-0 inside flex containers
labels: bug
assignees:

⸻

What version of Tailwind CSS are you using?
v3.4.1

What build tool (or framework if it abstracts the build tool) are you using?
Vite 5.1.0

What version of Node.js are you using?
v20.11.0

What browser are you using?
Chrome 123

What operating system are you using?
macOS Sonoma 14.3

Reproduction URL
https://play.tailwindcss.com/Q3aAsYhxse

Describe your issue
When using aspect-[16/9] or any arbitrary aspect ratio inside a flex container with min-w-0, the element fails to respect the aspect ratio and collapses to height 0 in Chrome. Removing min-w-0 or replacing aspect-[16/9] with a standard aspect-video fixes it, but that limits flexibility.
This bug causes layout breaks in responsive components where aspect ratios are needed dynamically.

Expected behavior: The element should maintain its aspect ratio regardless of min-w-0 when aspect-[16/9] is applied.

[wongjn]

It sounds like this is an issue with how CSS works, not an issue with Tailwind per se. You can try setting align-items: start on the flex parent element via the items-start class or align-self: start on the flex child with the aspect-* class.

Though what does intrigue me is that the behavior differs between aspect-video and aspect-[16/9] as they should set the same CSS.

Also, your Tailwind Play URL leads to a 404 - consider providing the correct URL.