I have 2 items inside a flex box. When there's plenty of horizontal space available, I'd like the right element to be a maximum width, and the left element take up all remaining space. As the available width decreases I'd like to shrink the left element down until it hits a certain width. Then, I'd like to shrink the right element down until it hits a certain minimum width. At that point, I'd like to shrink the left element down again until it hits a different minimum width. After that, I'd like the elements to wrap, with the first element taking up its entire row, and the second element to be its maximum width.
I refer to it as shrinking because that's how I think about it, but I don't think I can use flex-shrink here, because flex wrapping happens before flex shrinking. I almost got there by setting the flex-basis of each element to its min-width, setting flex-grow on both to 1, and setting a max-width on the right element. However, this makes both elements grow at the same rate as the available space increases. I don't want the right element to grow until the left one hits a certain width. The snippet below shows this.
I'm not necessarily tied to a flexbox here, although I am hoping for a CSS solution. If a CSS grid or some other mechanism will make this work, I'm certainly open to that.
In the below snippet, the widths that are set on the container divs are just there to simulate widths that they could be. In real code, those widths would all be set to auto and the actual width would be determined by the browser's viewport size and other dynamic elements on the page.
div { height: 175px;}.container { background-color: grey; display: flex; flex-wrap: wrap; width: 700px; margin-bottom: 20px;}.high-width { width: 600px;}.med-high-width { width: 500px;}.med-low-width { width: 450px;}.low-width { width: 400px;}.content { background-color: lightblue; flex: 1 0 350px;}.sidebar { background-color: lightgreen; flex: 1 0 100px; max-width: 200px;}.wrong { background-color: red;}<div class="container"><div class="content">This fills the remaining space (500px), which is what I want!</div><div class="sidebar">This is 200px wide, which is what I want!</div></div><div class="container high-width"><div class="content">This is 425px wide but I want it it to be 450px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div><div class="sidebar wrong">This is 175px wide but I want it to be 150px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div></div><div class="container med-high-width"><div class="content">This fills the remaining space, but that is 375px when I want it to be 400px (Once the sidebar is at its min-width, the content should start shrinking again)</div><div class="sidebar wrong">This is 125px wide but I want it to be 100px (Once the content gets down to 450px wide, I want the sidebar to start shrinking until it hits its min width)</div></div><div class="container med-low-width"><div class="content">This fills the remaining space (350px), which is what I want!</div><div class="sidebar">This is 100px wide, which is what I want!</div></div><div class="container low-width"><div class="content">This is on a row by itself, full width (400p), which is what I want!</div><div class="sidebar">This is on a row by itself and 200px wide, which is what I want!</div></div>