How to scroll ONE element horizontally?

Question

How can I scroll the "cssSection" div horizontally? It goes off screen but it scrolls the whole page. It tried using white-space: nowrap but it messes up all the text. What can I do?
https://code.sololearn.com/Ww8H101JAztc/?ref=app

Answer 1

I think this is what you were looking for?
You basically did it all correct just two small errors.
1. width is to wide so it goes off screen and widens the entire document.
2. overflow scrolls only activate if there is enough content so that something needs to be scrolled to show.
https://code.sololearn.com/WrPpCpT4cfsN

Answer 2

If you will have more elements or set smaler width (property as below) then you can see the scroll.

.cssSection{
display:flex;
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
width:60%;
border:5px solid;
}

Answer 3

JME Sorry for asking again. I have 1 more issue. The cards have changed in width. I added a javascript section and it messed everything up, even the CSS is morphed.

Why does this always happen? I'm doing so well until CSS bites back and messes everything up!

EDIT: Fixed on another post

Answer 4

JME Just a question, do you know why the entire page scrolls a little bit? I put margins in the .page div but it's still slightly scrolling. Very subtle but very annoying

Answer 5

JME Perfect! Thanks!

Answer 6

Clueless Coder 100vw takes up the entire width of the viewport. Adding margin forces it beyond the width hence the small scroll.
Either set the margin to 0 or reduce the vw below 100