Skip to content
Lumen Co
Notifications
Isla Kowalski joined the team
12 hours agoMaya Larsen updated the report
just nowAria Hughes sent a new order
6 hours ago
View all

Overflow

Overflow utilities control what happens when content is bigger than its box: overflow-auto scrolls when needed, overflow-hidden clips, overflow-visible lets content spill and overflow-scroll always shows scrollbars. overflow-x-* and overflow-y-* handle each axis separately, ideal for wide tables and side-scrolling rows.

1The four overflow values

overflow-auto, overflow-hidden, overflow-visible and overflow-scroll on boxes of fixed height.

overflow-auto
Our annual report is independently audited and published in full. Every detail is handled by people who care about getting it right. Ninety cents of every dollar goes directly to the projects you support. Start in minutes and get help from a real person whenever you need it.
overflow-hidden
Our annual report is independently audited and published in full. Every detail is handled by people who care about getting it right. Ninety cents of every dollar goes directly to the projects you support. Start in minutes and get help from a real person whenever you need it.
overflow-visible
Our annual report is independently audited and published in full. Every detail is handled by people who care about getting it right. Ninety cents of every dollar goes directly to the projects you support. Start in minutes and get help from a real person whenever you need it.
overflow-scroll
Our annual report is independently audited and published in full. Every detail is handled by people who care about getting it right. Ninety cents of every dollar goes directly to the projects you support. Start in minutes and get help from a real person whenever you need it.

2Horizontal scroll only

overflow-x-auto with flex-nowrap scrolls a row of cards sideways.

Education fund
Education fund
Education fund
Food relief
Education fund

3Vertical scroll only

overflow-y-auto and a max-height make a scrolling list.

  • Zoe Harlow
  • Maya Quinn
  • Mateo Kim
  • Arjun Rossi
  • Aria Lindqvist
  • Lucas Nguyen

4Hidden to clip rounded corners

overflow-hidden on a rounded card clips the image corners.

Not clipped
without
Clipped
overflow-hidden

5Wide table

A wide table inside overflow-x-auto scrolls instead of breaking the page.

OrderCustomerCityDateStatusTotal
#ORD-7377Kenji DuarteLisbonAug 29, 2026Draft$251.90
#PO-2759Omar KowalskiSingaporeSep 17, 2026Overdue$354.80

6Code block that scrolls

Long lines in a pre with overflow-x-auto stay on one line.

npm run build -- --mode production --out-dir dist/lumen-co --base ./ --sourcemap false --emptyOutDir

7Chat window

A fixed height message area with overflow-y-auto above a fixed input.

Local partners know their communities and make sure help arrives where it matters.
We keep things simple, so you can focus on what matters to you.
Monthly gifts let us plan ahead and respond quickly when disaster strikes.
We have helped more than two hundred thousand people since we started.

8Scrollable tab strip

Pills in a flex-nowrap row with overflow-x-auto for many categories.

9Terms box

A long text inside a bordered box with overflow-auto, like a licence agreement.

Terms of use

You receive photos and updates showing exactly what your donation achieved. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact.

Clean water wells are built with and maintained by local communities. Local partners know their communities and make sure help arrives where it matters. Leave a gift in your will and help future generations. Every detail is handled by people who care about getting it right.

Monthly gifts let us plan ahead and respond quickly when disaster strikes. Start in minutes and get help from a real person whenever you need it. Companies can match employee donations and double their impact. We keep things simple, so you can focus on what matters to you.

10Visible overflow for a badge

overflow-visible lets a badge stick out of a box that would otherwise clip it.

overflow-hidden2
overflow-visible9

11Hidden overflow for a cropped title

overflow-hidden with a fixed height clips long text to two lines worth of space.

Hope starts with you - Every donation is tax-deductible, and receipts arrive by email instantly.
May 11, 2026

12Sidebar that scrolls separately

The nav column scrolls with overflow-y-auto while the content stays put.

Clean water wells are built with and maintained by local communities. We have helped more than two hundred thousand people since we started.

13Image pan area

A large image in an overflow-auto box can be scrolled in both directions.

Ten ways to fundraise with friends

14Kanban columns

Columns side by side in overflow-x-auto, each column scrolls with overflow-y-auto.

To do
Clean water
Education fund
Food relief
Doing
Volunteer programs
Done
Volunteer programs

15Overflow-x hidden

overflow-x-hidden hides content that slides in from the side, like an off-screen panel.

Ninety cents of every dollar goes directly to the projects you support.
Panel partly off the edge

16Overflow-y scroll always

overflow-y-scroll always shows the vertical scrollbar, so the width never jumps.

Friendly people answer your questions quickly, by phone, chat or email.

17Notification panel

A dropdown-like panel with header, scrolling body and footer.

Notifications
Our annual report is independently audited and published in full.
A school kit costs less than a cinema ticket and lasts a whole year.
Thousands of donors already trust us, and we work hard to keep it that way.
You receive photos and updates showing exactly what your donation achieved.
View all

18Clip a decorative shape

A big circle partly outside its panel is cut off by overflow-hidden.

Help us build a kinder world

We listen first, then build a plan around what you actually need.

19Long word handling

overflow-hidden plus text-truncate versus text-break for an unbreakable string.

downloads/lumen-co/assets/very-long-file-name-without-any-spaces-at-all.zip
downloads/lumen-co/assets/very-long-file-name-without-any-spaces-at-all.zip

20Responsive table wrapper

table-responsive is the helper made of overflow-x-auto for tables.

PlanUsersStorageSupportAPIPrice
Pro14295 GBEmail and chatUnlimited$48.69