title: Three-column HTML flex box: how to set the middle one to get all the remaining space?
body: <p>Let's say I have a simple three-column layout set up using <code>display: flex;</code> (<a href="http://jsfiddle.net/sexyzane/s1j40s42/" rel="noreferrer">demo</a>). In the left and right columns, I have images with a specified width (<code>100px</code> each). In the center column, I have the main content area. This area has an high-res image:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="main-container"&gt;
  
      &lt;div id="left-content"&gt;
          &lt;div&gt;&lt;img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="center-content"&gt;
          &lt;div&gt;&lt;img src="https://farm6.staticflickr.com/5560/14080568109_9f33dc7964_o.jpg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="right-content"&gt;
          &lt;div&gt;&lt;img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre class="lang-css prettyprint-override"><code>#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;
      }
  </code></pre>
  
  <p>What am I missing?</p>