{"id":2985,"date":"2024-07-10T16:09:38","date_gmt":"2024-07-10T22:09:38","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2985"},"modified":"2024-07-10T16:09:39","modified_gmt":"2024-07-10T22:09:39","slug":"single-directionally-allowed-overflow","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/single-directionally-allowed-overflow\/","title":{"rendered":"Single-Directionally Allowed Overflow"},"content":{"rendered":"\n

There is this annoying thing in CSS where it feels<\/em> like you should be able to hide<\/strong> overflow<\/code> in one direction and allow<\/strong> it in another, since they can be separate properties:<\/p>\n\n\n

.nav-bar<\/span> {\n  overflow-x<\/span>: hidden;\n  overflow-y<\/span>: visible;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
But you’ll be disappointed<\/a>.<\/p>\n\n\n\n
I really wish I could explain to you why<\/em> you can’t do that, but I don’t know the historical CSS discussions that got us here. People clearly want to do it sometimes. I know, I’ve read tons<\/em> of threads about it. The most common use case is something like an app sidebar along the left of a layout which can scroll vertically, but allows for menus that can extend out of it to the right. Another use case is a header bar on top of a site that hides the horizontal overflow but allows for vertical (sometimes a nice protection to avoid awkward “page zoom outs” with content that accidentally overflows).<\/p>\n\n\n\n
Good news: you can do it with the clip<\/code> value<\/h2>\n\n\n\n
This does<\/em> work:<\/p>\n\n\n
.nav-bar<\/span> {\n<\/span><\/span>  overflow-x<\/span>: clip;\n<\/span><\/mark>  overflow-y<\/span>: visible;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Here’s the proof:<\/p>\n\n\n\n