overflow: clip

Clipping that leaves sticky alone

CaveatScroll both panes: the same heading sticks on the right and scrolls away on the left. overflow-x: hidden is not allowed to stay on its axis — the used value of the other one changes from visible to auto, so the wrapper becomes a scroll container. Every position: sticky below it now resolves against that box, which has no height of its own and therefore never scrolls, so it never sticks. This is what a wrapper added months earlier to stop one horizontal bleed does to a header nobody has touched. clip carries no such coupling: overflow-x: clip leaves overflow-y: visible alone.

FallbackAn engine without clip drops the declaration and overflow stays visible — the long line bleeds past the edge, which is visible but harmless, and sticky keeps working. The failure lands on the cosmetic side. Note the other half of the trade: a clip box is not scrollable at all, not even from script, so if something was quietly calling scrollTo on that element, hidden was doing more than hiding. And overflow-clip-margin lets a focus ring or shadow bleed a set distance before the cut, which hidden cannot do at any price.

<div class="pane">
  <div class="wrap">
    <h4>STICKY</h4>
    <p>a line wider than the pane</p>
  </div>
</div>

/* the one that scrolls */
.pane { height: 148px; overflow-y: auto; }

/* hidden here would drag overflow-y to
   auto, and sticky below dies in the
   scroll container that makes */
.wrap { overflow-x: clip; }

h4 { position: sticky; top: 0; }
p { white-space: nowrap; }

Published 21 Aug 2026