Responsive Size Constraints
Preferred sizes with safe minimums and maximums
1. width + max-width
The boxes below use width: 100%, but stop growing at different limits.
Wide container
width: 100%; max-width: 720px
It shrinks with its parent and stops growing at 720px.
Narrow container
width: 100%; max-width: 440px
Auto side margins center it after max-width stops its growth.
2. min-width requires care
Minimum card
width: 30%
min-width: 200px
If the parent becomes narrower than 200px, this card cannot shrink further and may overflow.
3. Prefer min-height for changing content
Both examples have min-height: 220px, but either may grow when content needs more room.
Short content
The card keeps its useful minimum height.
Longer content
- The minimum establishes a starting size.
- Content can still make the card taller.
- This is safer than fixing text cards to one height.
- No content needs to be clipped.
4. A safe max-height example
This known-ratio image is capped at 252px. Changing text is not placed in a restrictive max-height.
