Overflow

Control how content that exceeds element bounds is displayed with CSS overflow properties.

overflow: hidden

Content clipped, no scrollbars:


<div className="w-40 h-24 border border-dashed border-line rounded bg-surface overflow-hidden">
  <div className="w-60">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

overflow: auto

Scrollbars appear when needed:


<div className="w-40 h-24 border border-dashed border-line rounded bg-surface overflow-auto">
  <div className="w-60">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

overflow: scroll

Scrollbars are always shown:


<div className="w-40 h-24 border border-dashed border-line rounded bg-surface overflow-scroll">
  <div className="w-60">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

Next Steps

Flexbox Layout - Master one-dimensional layouts
Flow Layout - Understand block and inline layouts
Positioned Layout - Learn positioning techniques