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

css, flexbox, html

Solution

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>

Problem

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?

Original source