I have an element with a min-height
style that’s not being respected. As you can see in the screenshot below, the element has a min-height
of 38px
, but the element has a lower height of 18.195px
:
But, my question is not “please debug this specific element for me”. Instead, I’m trying to understand how the property works in CSS in general. If you read the MDN, they make it sound simple:
The element’s height is set to the value of min-height whenever min-height is larger than max-height or height.
But clearly there’s more to the story: when some other property X is set or condition Y applies, the browser doesn’t set the min-height
.
So my question is, what conditions/other styles can make the browser ignore a min-height
style? Or in other words, what’s missing from the MDN description that could explain my screenshot?