Scenario
We have a header within a flex container that we want to expand as space allows and also to have a minimum width of 200px.
<div style="display: flex">
<div id="header">this is the header</div>
</div>Approach
Style the header div with flex: 1 0 200px; , which means flex-grow: 1 and so it will expand to fill space and flex-shrink: 0 , which turns shrinking off after the item reaches the minimum size of 200px;
