Setting a Flex Container Item to Have a Minimum Width

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;

Demo

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation