We can make use of overflow and white-space properties of CSS to create a horizontal scrolling menu.
CSS overflow property
We can tell browser what to do when the content overflows an element’s box using the overflow property. We can decide to clip content or to add scrollbars. If we don’t specify, browser will just add it’s value to default which is same as visible — it will show the content overflowing it’s box.
CSS white-space property
We can tell browser how to handle the white space inside a container using the white-space property.
We will use nowrap value in white-space property. It will make all sequences of whitespace collapse into a single whitespace. Text will never wrap to the next line until a br tag is encountered in the line.
Example with display:block
I’ve used SCSS in the example but it’s easy to convert it into CSS code.
Example with display:flex
We can just convert the container into flex in the example above and the menu will behave the same way. Take a look:
To be on the safe side, I have added flex-direction:row; flex-wrap:nowrap; but we can skip it and browser will keep those values as default.
block create flex flexbox horizontally menu scroll scss
