Other width Utilities

Bellow is a Demonstration of How Other width Utilities Works

width: auto (default)
Element takes up available space based on content and parent constraints
Normal content
Very long content that might overflow the container
width: fit-content
Element shrinks to fit content, but won't expand beyond available space
Short text
Long content that will be constrained by parent
width: max-content
Element expands to fit all content, regardless of container (may overflow)
Short text
Very long content that will overflow the container
width: min-content
Element shrinks to smallest possible width based on content
Short text
Long content shrunk to minimum
A
M
U
L
T
I
L
I
N
E
T
E
X
T
width: 100%
Element takes up 100% of parent container's width
Fills 300px container
Fills 500px container
Comparison of Width Values
auto
fit-content
max-content
min-content
100%
auto with long text
fit-content with long text
max-content with long text
min-content with long text
100% with long text
Important Notes
  • auto is the default width behavior (respects parent constraints)
  • fit-content is useful for elements that should shrink-wrap but not overflow
  • max-content forces the element to contain all content without wrapping
  • min-content makes the element as narrow as its content allows
  • 100% makes the element fill its container regardless of content
  • These properties work with both block and inline elements
  • Combine with max-width/min-width for more complex layouts