I have a list of items that I'm trying to arrange into a scrollable horizontal layout with flexbox.
Each item in the container has a margin left and right, but the right margin of the last item is being collapsed.
Is there a way to stop this happening, or a good workaround?
ul { list-style-type: none; padding: 0; margin: 0; display: flex; height: 300px; overflow: auto; width: 600px; background: orange;}ul li { background: blue; color: #fff; padding: 90px; margin: 0 30px; white-space: nowrap; flex-basis: auto;}<div class="container"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul></div>