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

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

--

--

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