Скачать или смотреть CSS 2.1 - position absolute with min (max) width and min (max) height properties

position absolute usage with min (max)-width and min (max)-height properties

Important: min (max)-width and min (max)-height properties do not accept negative values

Using these properties we can set limits on element width and height


1. min-width/min-height scenario - element will be minimum 5em width and 10em height.
In this situation the element will not get smaller - it doesn't matter what is the size of the containing block

main {position:relative; width:15em; height: 15em; outline: 1px solid gray; margin: 15% auto;}
div {position: absolute; top: 10%; bottom: 20%; left: 50%; right: 10%; min-width: 10em; min-height: 20em; outline: 1px solid gray; background: lightgreen;}

2 . But if we remove min-height and add height: auto and set bottom to auto, we get the element that is 40% wide in relation to its container (since default width is auto
and container is 100% - (minus) left offset 50% and right: 10% (60) = 40% width of the div)
but at the same time it can not be less than 10em in width.

height: auto and bottom: auto will make the element height sufficient enough just to accomodate its content.

main {position:relative; width:15em; height: 15em; outline: 1px solid gray; margin: 15% auto;}
div {position: absolute; top: 10%; bottom: auto; left: 50%; right: 10%; min-width: 10em; height: auto; outline: 1px solid gray; background: lightgreen;}



3. In the event of max-width scenario we can limit the element width so it won't grow wider irrespective of the width of its container

width: 80% of 600 (main) = 480 but with max-width: 300px; div will not grow wider than 300px;

main {position:relative; width:600px; height: 300px; outline: 1px solid gray; margin: 15% auto;}
div {position: absolute; left: 0; right: auto; width: 80%; max-width: 300px; outline: 1px solid gray; background: lightgreen;}