I am creating a responsive front page with articles that resize with the page. I have a div 'flex-container' which will contain 3 or 4 articles, maybe more. If the page is increased in size, the articles spread out, and if the page is reduced in size they get pushed together and overlap slightly and the user can scroll right to see the articles on a screen.
I want the left side of the 'flex-continainer' div to stay pinned to the left side of the screen and only the right hand side of it to flow off the right hand side of the screen, so the first article is always visible and the user has to scroll right to see the rest. I am having difficulty doing this and making the scroll bar appear properly. As the screen is reduced in size, the center of the 'flex-container' div remains in the center of the screen, and the articles overflow off the left and right hand side of the screen. So the left hand side of the first article is not visible.
.flex-container { display: flex; padding: 0; margin: 0; width: 100vw; height: 100vh; align-items: center; justify-content: space-evenly; background-color: grey; overflow-x: scroll;}.article { display: flex; width: 30%; min-width: 200px; max-width: 400px; height: 50%; padding: 20px; margin-left: -30px; border: solid 4px white; border-radius: 16px; background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgb(77, 74, 74)); box-shadow: -10px 0px 10px 10px rgba(0, 0, 0, 0.3);}.article:hover { z-index: 1;}h2 { font-size: 2.5vw;}<div class="flex-container"><div class="article"><h2>Heading 1</h2></div><div class="article"><h2>Heading 2</h2></div><div class="article"><h2>Heading 3</h2></div></div>