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?