max-height overriding height - css

Question

As a beginner front-end developer, I find it hard to understand when to use height, min-height and max-height.
I was reading through the docs on MDN about the max-height property and its use in conjunction with height.
According to the docs,
max-height overrides height, but min-height overrides max-height.
But what I don't get is that if we have a div, set a height and max-height, the height seems to take precedence.
For example:
HTML:
<div class="wrapper">
A text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
CSS:
.wrapper {
width: 100px; background-color:red; height: 100px; max-height: 1000px;
}
JSBin: https://jsbin.com/kovama/13/edit?html,css,output .
Why doesn't the max-height override height ?
The div only seems to grow as large as the content when I remove the height property.
Moreover, when it is stated that min-height overrides max-height it is only when min-height is actually larger than max-height, is that correct? I find the wording a bit confusing.

Answer 1

Think of min-height and max-height as the minimum and maximum valid calculated value for height.
So if you set min-height:100px; and max-height: 1000px; the element will always have a height between 100 and 1000px. So if you set the height to 500px, then that value is in the allowed range, and that is used as the real height.
But if you set height to 2000px, then than is not within the allowed range, so the height will be reduced to 1000px, so it comes within the allowed range.
But setting both max-height and height in px, don't make a lot of sense. Because then the smallest of max-height and height will always be used.
The normal use is to combine % and px.
if you set something like width:100%; max-width:700px; Then you have set the width to 100% of the available space, but it should still newer be more then 700 pixel.
You can also do it the other way:
width:50%; min-width:500px; This will use half the available space, but always at least 500 pixels.

Answer 2

To better illustrate this here are some examples:
.box {
width: 50px;
height: 50px;
background: red;
display: inline-block;
}
/* box1 will have the height 50px because it doesn't exceed 400px */
.box1 {
max-height: 400px;
}
/* box2 will have the height 40px,
so in this case max-height overrides the height property
This happended because the height of the div was exeeding the maximum allowed
*/
.box2 {
max-height: 40px;
}
/* box3 will have the height 80px
This happens because we said that the minimum should be 80px
so the height and max-height properties are ignored
*/
.box3 {
max-height: 40px;
min-height: 80px;
}
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

Answer 3

if you set min-height you will apply a minimum limit of height on the div, the height of the div cannot go below that minimum height. Similarly, max-height limits the height of the div to not go more than what set on max-height. Take an example :
div {
min-height: 500px;
max-height: 1000px;
}
from the above css, the height of the div can be anything between 500px and 1000px (both inclusive), the actual height (visible height) will be auto adjusted between this range according to the contents it holds. Now see this css -
div {
height: 600px;
min-height: 500px;
max-height: 1000px;
}
by using the above css, div height is by default set to 600px if content is short then space will appear at the bottom of the div because the height has been fixed to 600px, in case the content wants to expand the div, it will do that, but it will expand to 1000px only.