overflow: clip saved my navbar
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…
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.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
