[Bug]: Percentaged max-width img resulted in unexpected intrinsic parent

[thien-do]

What version of Tailwind CSS are you using?

Latest (play.tailwind)

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

Not applicable

What version of Node.js are you using?

Not applicable

What browser are you using?

Tested on Firefox and Edge (chromium-based)

What operating system are you using?

Not applicable

Reproduction repository

https://play.tailwindcss.com/YQ7Rdp8lvn

Describe your issue

Hi, I'm not really sure this is a bug, but it produces somewhat unexpected result so I think it's better to make an issue, at least others may find it if they search :d

so the thing is Tailwind's base CSS has img { max-width: 100% }. This helps responsive design. However, it causes a kind of hard to debug bug if the img is used as part of an intrinsic parent (e.g. a table, or an element with "width: min-content").

I made a re-producible playground for the bug at Tailwind playground: https://play.tailwindcss.com/YQ7Rdp8lvn (and by the way, your playground rocks!)

As you can see in the playground: the size of the image is defined by the size of the text next to it! I explained everything I know in the playground:

We have img { max-width: 100% } globally. This makes some browsers to think it's an extrinsic element when its parent is intrinsic-sized. This means:

1. the width of the image is now 100% width of its parent, but
2. the image does not contribute to its parent width, only the sibling text

So... I'm sorry that I don't know what should be done here. Please feel free to close this issue. I've just wanted to pay it forward, in case somewhat encouter this issue and search this repo :D

See also:

• https://bugzilla.mozilla.org/show_bug.cgi?id=823483
• https://bugzilla.mozilla.org/show_bug.cgi?id=1139931

[adamwathan]

Hey! Hah, yeah that's a weird demo for sure 😅 I don't want to change this as it would be a pretty serious breaking change, so instead I think the best approach is to explicitly add max-w-none to images if you want to override the default max-width: 100% style we apply.