visible
Content paints beyond the box.
Nothing is clipped.
The box remains the declared height.
Later content may be covered.
This is the default behavior.
The extra lines remain visible.
But the layout can become messy.
Compare the four values
Each card has height: 12rem and contains more text than it can display normally.
hidden
Content outside the box is clipped.
No scrollbar is offered.
Some information may disappear.
Use only when clipping is intended.
Do not hide required instructions.
Do not hide important controls.
This final line may be clipped.
auto
Scrolling appears when needed.
All information stays reachable.
No unnecessary scrollbar is requested.
This is often best for panels.
It works with max-height.
It works with fixed height.
Scroll to reach this final line.
scroll
The box is always a scroll container.
Scrollbars depend on the platform.
They may show even when unnecessary.
The content stays reachable.
It is less adaptive than auto.
Use it only deliberately.
Scroll to reach this final line.
Recommended content panel
height: 12rem; overflow: auto
Release notes
- Added predictable border-box sizing.
- Added percentage and rem-based containers.
- Added small, large, and dynamic viewport units.
- Added visible, hidden, auto, and scroll examples.
- Kept all content reachable in this panel.
- Used auto so scrolling appears only when needed.
- A size constraint controls the panel dimensions.
- Overflow controls what excess content does.