min-width and max-width

With min-width and min-height you can set a minimum width and height for HTML elements, while max-width and max-height set a maximum width and height. These properties overrule the normal width and height.

The value none removes a max-height or max-width, though not a min-height or min-width.

All paragraphs below have these styles:

.test {
	border: 2px solid #6374AB;
	padding: 10px;
}

This is the default test paragraph. It has width: 75%. All paragraphs below have an extra min/max declaration added.

Test paragraph with max-width: 50px

Test paragraph with min-width: 800px

Test paragraph with min-height: 200px

Test paragraph with max-height: 10px

With box-sizing

Combining min/max-width with box-sizing used to be a problem. Both these paragraphs have max-width: 100px. In addition, the second one has box-sizing: border-box so it should be narrower than the first one.

This one should be wider

and this one should be narrower