GitHub

Install it as an agent skill

npx skills@latest add vojtaholik/good-css

For Claude Code, Codex, Cursor and any other agent that reads skills. The source and the other ways to install are on GitHub.

Entry 08

overflow: clip over hidden

Use it whenever you want to cut off overflow and do not need scrolling.

Open
The frame has no horizontal scrollbar. Scroll down: the label stays stuck to the top.
Code CSS · 1 line 
.hero { overflow-x: clip; }
Why it works, the rules and the credits 2 reasons · 3 rules · support · credits

Why it works

  1. hidden turns the element into a scroll container and sets the other axis to auto. That causes stray scrollbars and breaks position: sticky inside it.
  2. clip cuts the overflow and does neither.

Rules

  1. Put it on the element that overflows, not on html or body.
  2. Keep hidden or auto for elements a script scrolls. clip blocks that too.
  3. Keep hidden or auto on an element with resize. With clip the browser draws no resize handle.

Support

Chrome
90
Firefox
81
Safari
16

Credits

Borrowed from: Kevin Powell, 2 better alternatives to overflow: hidden, 2023-12-14

02 / 08 8 entries

Layout

  1. 01 Content grid with breakouts
  2. 02 Intrinsic grid
  3. 03 Subgrid rows shared across cards
  4. 04 Sidebar that wraps on its own
  5. 05 Container queries with container units
  6. 06 Stack layers with grid
  7. 07 Safe alignment
  8. 08 overflow: clip over hidden