Tailwindcss: h-full is unintuitive when compared to w-full

[bernaferrari]

I'm not sure if that is by design or a bug, but I couldn't find any issue about it.

Basically, these two lines of code should work in the same way, right? Wrong.

<div class="w-full h-64 bg-orange-200"></div>
<div class="h-full w-64 bg-blue-200"></div>

The first line will work as expected, but the second line doesn't unless the parent has a defined height. This is documented:

Use h-full to set an element's height to 100% of its parent, as long as the parent has a defined height.

On most languages and frameworks, width and height work similarly. I was expecting this to also be the case on Tailwind, but I learned it is different. This difference is weird, bad for discoverability, looks like a bug (even if it is documented) and I wish it was fixed. The need for h-screen or an additional div to set the height feels wrong.

[estevanmaito]

Could you share examples of languages and frameworks that have this behavior?

I will tell you about what I'm familiar with, that is Tailwind, Bootstrap and common CSS, but these 3 work exactly the same way:

• Boostrap https://getbootstrap.com/docs/4.5/utilities/sizing/#relative-to-the-parent
• The CSS definition here and here

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

https://css-tricks.com/almanac/properties/h/height/

https://stackoverflow.com/a/7049918/4480553

[pt_BR] https://medium.com/@tassiogoncalvesg/entenda-de-uma-vez-por-todas-como-utilizar-o-height-100-no-css-6d72914a6748

[bernaferrari]

Uh oh! Thanks! I didn't know this also differed in others, even tried Bootstrap in a playground to make sure. Very weird, indeed. I was actually referring to other non-css stuff, but I never thought it came from css. Thanks!