HTML & CSS Interview Question #72
What is the difference between width, min-width, and max-width?
CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate
Quick Interview Answer
width specifies a preferred or definite width according to the layout context. min-width prevents the used width from becoming smaller than a limit, while max-width prevents it from becoming larger than a limit.
Detailed Explanation
width specifies a preferred or definite width according to the layout context. min-width prevents the used width from becoming smaller than a limit, while max-width prevents it from becoming larger than a limit.
Responsive layouts often combine width: 100% with max-width so an element can shrink on smaller screens but does not become excessively wide on large screens. min-width: 0 is also important for allowing some flex and grid items to shrink instead of overflowing.
Code Example
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
}
.flex-child {
min-width: 0;
}