mheavers mheavers - 1 year ago 289
CSS Question

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;

<div id="container">
<div class="column left">
<p>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.</p>
<div class="column center">
<img src="" width="100" height="100" alt="">
<div class="column right">
Balint Zsako
<br/> Someone’s Knocking at My Door
<br/> 01.12.13

Here's a fiddle:

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download