Bellow is a Demonstration of How Height Property Utility Classes Works
height: auto
The element's height is determined by its content
This is an item with height: auto. It will expand to fit its content.
Multiple lines of content will make this element taller.
Third line to demonstrate.
height: initial
The element's height is set to its initial value (auto for height)
This is an item with height: initial. It behaves similarly to auto in this case.
Second line of content.
height: inherit
The element inherits its height value from its parent (300px in this case)
This item inherits its height from the parent container (300px).
The content may overflow if it's taller than the container.
(Additional content to demonstrate overflow)
height: unset
Resets the height to its inherited value if inheritable, otherwise to initial value
This item has height: unset. In this case, it behaves like auto.
Second line of content.
height: revert
Reverts the height to the value it would have had if no author styles were applied
This item has height: revert. It typically behaves like auto unless user-agent styles specify otherwise.
Second line of content.
height: revert-layer
Reverts the height to the value it had in a previous cascade layer
This item has height: revert-layer. Behavior depends on cascade layers (not shown in this simple example).
Second line of content.
Comparison in nested context
Demonstrating different height values in a nested context