Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Flexbox - two fixed width columns, one flexible

Flexbox - two fixed width columns, one flexible


I'm trying to set up a flexbox with three columns where the left and right columns have a Fixed Width, and the center column flexes to fill the available space.

Despite setting up dimensions for the columns, they still seem to shrink as the window shrinks.

Anyone know how to accomplish this?

An additional thing I will need to do is hide the right column based on user interaction, in which case the left column would still keep its fixed Width, but the center column would fill the rest of the space.

#container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 1200px;

.column.left {
    width: 230px;

.column.right {
    width: 230px;
    border-left: 1px solid #eee;
} {
    border-left: 1px solid #eee;

Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.

Balint Zsako
Someone’s Knocking at My Door

Here's a fiddle:

Problem courtesy of: mheavers


Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; which means:

  • 0 = don't grow (shorthand for flex-grow)
  • 0 = don't shrink (shorthand for flex-shrink)
  • 230px = start at 230px (shorthand for flex-basis)

which means: always be 230px.

Voila fiddle.

Oh, and I removed the justify-content and align-items because they're irrelevant.

Solution courtesy of: Rudie


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Flexbox - two fixed width columns, one flexible


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription