CSS: min-width max-width, min-height max-height

min-width max-width, min-height max-height

• min-width max-width
• min-height max-height

These are CSS properties that specify the absolute lower bound and upper bound width and neight for an element.

If you want to make sure a box size never changes in any condition, (even inside flex/grid containers or with lots of content), give them the same value with fixed unit, such as px.

.fixed-box {
 width: 300px;
 height: 200px;
 min-width: 300px; /* prevent shrinking */
 max-width: 300px; /* prevent growing */
 min-height: 200px;
 max-height: 200px;

 /* Recommended additions */
 box-sizing: border-box; /* makes padding/border part of the size */
 overflow: auto; /* handles content that overflows */
}

• CSS: Box Sizing
• CSS: overflow (scrollbar)

browser support

supported by all major browsers since 2016.