Three-column HTML flex box: how to set the middle one to get all the remaining space?

Question

Let's say I have a simple three-column layout set up using display: flex; (demo). In the left and right columns, I have images with a specified width (100px each). In the center column, I have the main content area. This area has an high-res image:

<div id="main-container">      <div id="left-content">         <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>         <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>         <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>         <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>     </div>      <div id="center-content">         <div><img src="https://farm6.staticflickr.com/5560/14080568109_9f33dc7964_o.jpg"></div>     </div>      <div id="right-content">         <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>         <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>         <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>         <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>     </div>     </div>  </div> 

I need to tweak the CSS so that the center column width is, at most, 100% of the available space between the side columns (in other words, it must always be this wide: windowSize-column1-column2). If the window shrinks, I need the center column (and its image) to shrink with it.

#main-container     {     display: flex;     justify-content: space-between;     align-items: center;     }  #left-content, #right-content     {     width: 102px;      border-style: solid;     border-width: 2px;     border-color: magenta;     }  #left-content img, #right-content img     {     width: 100px;     }  #center-content     {     }  #center-content img     {     max-width: 100%;     height: auto;     } 

What am I missing?

Answer 1

The proper way to do it is with flex. Set flex to 1 1 auto for the middle column, and 0 0 100px for the side columns. This makes it so the side columns are always the specified width (or width of content, if set to auto), and the middle column takes up the remaining space (growing/shrinking accordingly).

#main-container {    display: flex;    justify-content: space-between;    align-items: center;  }    #center-content {    /* Lets middle column shrink/grow to available width */    flex: 1 1 auto;  }    #left-content,  #right-content {    /* Forces side columns to stay same width */    flex: 0 0 100px;  }    img {    /* Shrinks images to fit container */    max-width: 100%;  }

<div id="main-container">    <div id="left-content">      <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>      <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>      <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>      <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>    </div>      <div id="center-content">      <div><img src="https://farm6.staticflickr.com/5560/14080568109_9f33dc7964_o.jpg"></div>    </div>      <div id="right-content">      <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>      <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>      <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>      <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>    </div>  </div>

Answer 2

#center-content {     width: calc(100% - 204px); } 

Here is the fiddle: http://jsfiddle.net/sachinvermarip/s1j40s42/1/