Skip to content
Solao Base
Notifications
Theo Tanaka joined the team
just nowJonah Okafor commented on your task
yesterdayIvy Whitaker updated the report
3 min 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 clinic is fully accessible, with free parking right outside. We work with most insurance providers and explain any costs upfront. Your records are private, secure and always available when you need them. Modern equipment means faster diagnoses and more comfortable treatment.
overflow-hidden
Our clinic is fully accessible, with free parking right outside. We work with most insurance providers and explain any costs upfront. Your records are private, secure and always available when you need them. Modern equipment means faster diagnoses and more comfortable treatment.
overflow-visible
Our clinic is fully accessible, with free parking right outside. We work with most insurance providers and explain any costs upfront. Your records are private, secure and always available when you need them. Modern equipment means faster diagnoses and more comfortable treatment.
overflow-scroll
Our clinic is fully accessible, with free parking right outside. We work with most insurance providers and explain any costs upfront. Your records are private, secure and always available when you need them. Modern equipment means faster diagnoses and more comfortable treatment.

2Horizontal scroll only

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

Physiotherapy
Telehealth
Dental care
Physiotherapy
Physiotherapy

3Vertical scroll only

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

  • Mateo Rossi
  • Diego Kowalski
  • Omar Ashford
  • Samir Alvarez
  • Priya Nguyen
  • Ivy Ibrahim

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
#PO-3533Kenji OkaforDublinDec 8, 2025On hold$132.67
#ORD-3324Ruby HughesVancouverApr 19, 2026Pending$472.02

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/solao-base --base ./ --sourcemap false --emptyOutDir

7Chat window

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

Our team has done this many times, so you never have to guess.
Video consultations let you speak with a doctor from the comfort of home.
Start in minutes and get help from a real person whenever you need it.
Our team has done this many times, so you never have to guess.

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

Our clinic is fully accessible, with free parking right outside. Thousands of patients already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.

Children are welcome, and our paediatric team knows how to make them smile. Lab results arrive in your patient portal, usually within 48 hours. Same-day appointments are available for urgent needs on weekdays.

Book online in two minutes and see a doctor as soon as today. We measure success by how many patients come back and tell their friends. Modern equipment means faster diagnoses and more comfortable treatment.

10Visible overflow for a badge

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

overflow-hidden5
overflow-visible4

11Hidden overflow for a cropped title

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

Personal care from people who listen - Friendly reminders make sure you never miss a check-up or a dose.
Oct 3, 2025

12Sidebar that scrolls separately

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

Clear prices, honest advice and no surprises along the way. Family plans cover check-ups and vaccinations for everyone under one roof.

13Image pan area

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

Sleep tips our doctors actually use

14Kanban columns

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

To do
Telehealth
General practice
General practice
Doing
Lab tests
Done
Health check-ups

15Overflow-x hidden

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

We listen first, then build a plan around what you actually need.
Panel partly off the edge

16Overflow-y scroll always

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

Every detail is handled by people who care about getting it right.

17Notification panel

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

Notifications
Our specialists take time to listen and explain every step of your treatment.
Your records are private, secure and always available when you need them.
We work with most insurance providers and explain any costs upfront.
Friendly people answer your questions quickly, by phone, chat or email.
View all

18Clip a decorative shape

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

Your health, our priority

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/solao-base/assets/very-long-file-name-without-any-spaces-at-all.zip
downloads/solao-base/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
Pro16188 GBEmail and chatUnlimited$46.79