Creating a Flex Container with Fixed Width Left Right Columns and a Flexible Width Center Column

Image by D. from Pixabay

Scenario

We want a web page where the columns span the entire height of the viewport, the left and right columns has a fixed width of 200px, and the center column has a minimum width of 150px and will fill up any remaining horizontal space outside that.

Approach

We set the height of the body to 100vh . The main element will serve as the flexbox container display:flex .

We set the first columns flex property to flex: 0 0 200px; This means flex-grow and flex-shrink are both turned off (0) and so the width of this column will not change.

We do the same for the right column.

The center column has has flex set to

#c2 { flex: 1 0 150px; }

The column width ( flex-basis ) can expand (1) but will not shrink below the minimum width of 150px since flex-shrink is 0 .

Demo