Bug: max-h-* doesn't work on Chromium but works on Firefox

[SanmayJoshi]

What version of Tailwind CSS are you using?

v4.1.17

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

N/A (Tailwind Play)

What version of Node.js are you using?

N/A (Tailwind Play)

What browser are you using?

Chrome, Firefox

What operating system are you using?

Linux

Reproduction URL

https://play.tailwindcss.com/Lt0ipr00Jo

Describe your issue

The max-h-50 utility in Tailwind CSS does not function as expected in Chromium-based browsers, while it works correctly in Firefox.

May be relevant information:

• max-h-50 is a class for div that is indirect child of div with class max-h-[70lvh].
• Also using daisyUI.

Steps to Reproduce

• Open a Chromium-based browser (e.g., Google Chrome).
• Go to the provided Tailwind Play link: Tailwind Play Link.
• Observe the element set with the max-h-50 class (2nd.Big).

Expected Behavior

The element should have a maximum height of 50 (presumably 50 pixels or the configured unit in Tailwind CSS).

Actual Behavior

In Chromium, the element does not restrict its height correctly when using the max-h-50 utility. In contrast, the same element behaves as expected in Firefox.

Additional Information

• Chromium v141.0.7390.65
• Firefox v143.0.4
• daisyUI v5.5.5

[SanmayJoshi]

Closing this issue as it has been resolved. See saadeghi/daisyui#4308 .

Thank you.