I am using a nested flexbox layout.
I would like a left nav to always be 1/3rd of the page, and the right side always be 2/3rds.
The left nav should always stay in view.
The right side (an image carousel in my case) should always take up 2/3rds and have a horizontal scrollbar on the boxes.
In the code below, it simply stretches and ignores the overflow.
<div>
Top Header (should stay in view)
</div>
<div style="display: flex">
<div style="flex: 1 0 auto">
LeftNav
</div>
<div style="flex: 2 0 auto">
<div style="display: flex; flex-direction: row; overflow-x: scroll">
<div style="background-color: blue; min-width: 400px; height: 500px">
</div>
<div style="background-color: red; min-width: 400px; height: 500px">
</div>
<div style="background-color: green; min-width: 400px; height: 500px">
</div>
</div>
</div>