{
  "id": 2453435,
  "title": "overflow: clip saved my navbar",
  "url": "https://urgent.news/2026/08/21/overflow-clip-saved-my-navbar",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-21T23:34:30.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/carlosjcastrog/overflow-clip-saved-my-navbar-2a99"
  },
  "original_language": "en",
  "account": "The developer was working on a navigation overlay for their personal portfolio using Next.js 15, App Router, React 19, and Tailwind v4. The navbar opened a fullscreen overlay from the top, and each navigation link had a split reveal effect with a dark layer underneath the text. The issue arose when the overflow: hidden property, which was meant to clip the text layers, failed to do so inside a position: fixed container. The developer tried various fixes, including setting a fixed pixel height on the container, using a clip-path, moving overflow: hidden up to the li element, moving it to the ul, and using inline styles. However, none of these fixes worked because overflow: hidden creates a Block Formatting Context (BFC) and cannot be used inside a fixed position ancestor. The solution was to use overflow: clip, which clips the content visually without creating a BFC. By switching to overflow: clip, the text layers clipped cleanly at the container boundary, and the dark layer rose on hover as expected. This issue highlights the importance of understanding the CSS specification, as overflow: clip can be a more precise clipping mechanism in certain cases.",
  "summary": "This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry . There was no error in the console and the CSS was syntactically correct. And overflow: hidden was just not working. I was building the navigation overlay for my personal portfolio, which runs on Next.js 15 with App Router, React 19 and Tailwind v4. The navbar opens a fullscreen overlay that descends from the top…",
  "key_points": [
    "Developer struggled with overflow: hidden in position: fixed navbar",
    "Overflow: hidden creates Block Formatting Context (BFC)",
    "Overflow: clip solved clipping issue cleanly"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}