Max-height on border-boxed div with padding is not set

Question

We use the percentage trick on paddings to keep aspect ratio to a div when the user scales his window. Like this:

.div {
    background: red;
    width: 80%;         


        

Answer 1

Min-height property defines the height when height is solely dependent on padding only but max-height does not.

Not sure why but now in 2020, min and max css units does nice job as we need.

.classthatshoulddefineheight {
   padding-bottom: min(20%, 60px); 
}

So when 20% becomes greater than 60px then it will be limited to 60px (minimum of them).