min-height / max-height
CSS Using max-width
The max-width property sets the maximum allowed width of an element. This prevents the width of an element to be larger than the max-width property value.
The max-width property can have the following values:
length- Defines the maximum width in px, cm, etc.%- Defines the maximum width in percent of the containing blocknone- This is default. Means that there is no maximum width
One problem with the width property can occur when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page. So, using max-width will improve the browser's handling on small windows.
One <div> element with a max-width of 500 pixels, and one <div> element with a width of 500 pixels:
.div1 {
max-width: 500px;
background-color: powderblue;
}
.div2 {
width: 500px;
background-color: powderblue;
}
Note: If you use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property value will be used!
The min-width property defines the minimum width of an element.
If the content is smaller than the minimum width, the minimum width will be applied.
If the content is larger than the minimum width, the min-width property has no effect.
Note: This prevents the value of the width property from becoming smaller than min-width.
Definition and Usage
The max-height property defines the maximum height of an element.
If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.
If the content is smaller than the maximum height, the max-height property has no effect.
Note: This prevents the value of the height property from becoming larger than max-height. The value of the max-height property overrides the height property.
The min-height property defines the minimum height of an element.
If the content is smaller than the minimum height, the minimum height will be applied.
If the content is larger than the minimum height, the min-height property has no effect.
Note: This prevents the value of the height property from becoming smaller than min-height.