Does Size Matter?
1. Fixed and Flexible Sizes
- Absolute:
width: 300px. Block will always be this size, even if it doesn't fit on screen. - Relative:
width: 50%. Block will take half of parent. - Limiters:
max-width: 1200px. Site stretches, but on huge monitors content stays neatly in the center.
2. Content Magic: fit-content and min-content
Sometimes we don't know what width to set. Modern values help:
- min-content: Block shrinks to the longest word inside.
- max-content: Block stretches into one long line, ignoring line breaks.
- fit-content: Element takes as much space as content needs, but won't exceed parent boundaries.
3. Fixed Height Problem
Caution
Never set fixed height (height) for blocks with text. If text becomes longer or user increases font, content will simply " fall out " of the block or overlap another element. Use min-height.