How to center a div within a container even when there is overflow?

I have a page that has a flexbox spanning the width of the page. That flexbox has 3 items and is overflow:hidden and justify-content:space-between. The 3 items are Item1: 200px, Item2: 300px, and Item3: 200px. If the user resizes such that the screen is 600px, it can’t show all the items anymore, so the last one is cut off, and we see all 200px of Item1, all 300px of Item2, and only 100px of Item3.

What I’d like in this case is to show 150px of Item1, all 300px of Item2, and 150px of Item3, and continue that pattern as the screen changes size (always showing all 300px of Item 2). Is this possible/simple with just CSS?

You need to sign in to view this answers