34

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?

7
  • SOrry but it renders well in your FIddle. It does exactly what you want.
    – Djouuuuh
    Aug 12, 2014 at 12:55
  • Not really: the center is overlapping on the left-column. Aug 12, 2014 at 13:01
  • i think you can use width: calc(100% - 200px);
    – madhurjya
    Aug 12, 2014 at 13:02
  • I'm sorry I truly don't see your problem. I took a screenshot. awesomescreenshot.com/0a93atc528
    – Djouuuuh
    Aug 12, 2014 at 13:09
  • I increased a bit the width of the columns to make it more clear.
    – Djouuuuh
    Aug 12, 2014 at 13:10

6 Answers 6

53

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>

5
  • 1
    I switched to this as accepted after your comment on my previous accepted one. Yours is cleaner and really works best! Thanks! Aug 12, 2014 at 15:26
  • Anyway I can avoid fixing the side box width? That will be better than width fixing I think.
    – Lying_cat
    Jun 26, 2019 at 6:45
  • @SkuraZZ yup! The first part of flex is a quick way to set flex-grow and the second part is a quick way to set flex-shrink. So, if you want the sidebars and main content to scale at the same rate based on their content (works well for images only), then use #left-content, #right-content { flex: 1 1 auto }. But if you're dealing with text in those sidebars, and not using a width-relative size (eg, vw), then you'll also want to set a min-width on the sidebars.
    – 0b10011
    Jun 26, 2019 at 14:32
  • @0b10011 why are you not using flex:0 0 100px;? does that not do the same thing as flex:0 0 auto; width:100px?
    – klewis
    Jan 23, 2020 at 21:04
  • 1
    @klewis flex: 0 0 100px is probably the better option. I think when I was answering this ~5 years ago, I was in the process of learning flexbox, so it may have been a beginner mistake or I missed a refactor while getting it to work. Or, there's always the chance I ran into a bug in the early days and that was a workaround. Anyway, you can use either one. Any value specified in flex or flex-basis overrides width, so you can set a different width in a fallback value for browsers that don't support flexbox if you like.
    – 0b10011
    Jan 23, 2020 at 22:37
4
#center-content {
    width: calc(100% - 204px);
}

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

2
4

There is a simpler way to achieve what you're asking, and it only requires one line of CSS (flex-grow: 1).

.main-container {
  display: flex;
  min-height: 100vh;
}

.main-container > div {
  background-color: gray;
}

#center-content {
  flex-grow: 1;
  background-color: red;
}
<div class="main-container">    
  <div id="left-content">
    left
  </div>

  <div id="center-content">
  </div>

  <div id="right-content">
    right
  </div>
</div>  

1

If content of the auto-sized section in flexbox is larger than available area it meant to fit, browsers (at least Chrome and Firefox) will NOT respect flex:1 1 auto;, and the column/row will take enough space for it's content, not the target container. As a result, the total width/height of all columns/rows in flexbox will be more than 100%.

If flex:1 1 auto; is coupled with some explicit size, for example width: 10%;, then column will be correctly sized to available space, and 10% will be simply ignored. Size in px works equally well.

There is something funny going with overflow: hidden; being used instead of width: 10%;. Result in Firefox is identical, but Chrome cuts out the content on the opposite axis. Even if you set overflow-y: hidden; Chrome will cull the content on right hand side (axis x).

Here is an example:

#center-content {
  width: 100%;
  height: 10%;
  flex: 1 1 auto;
}
0

This is the bootstrap 4 solution (demo) :

<div id="main-container" class="d-flex justify-content-between">

<div id="left-content" class="col-auto">
<p> left</p>
</div>

<div id="center-content" class="flex-fill bg-success">
<p> middle stretched</p>
</div>

<div id="right-content" class="col-auto">
<p>right</p>
</div>

</div>
-2
#center-content
    {
        width:100%;
    }
2
  • @Sachin Verma solution is very good, but yours is even better! Here the fiddle: jsfiddle.net/sexyzane/gyhej0jy Aug 12, 2014 at 13:10
  • 1
    @Dr.GianluigiZaneZanettini This does not respect the width of the side columns (notice the "work in progress" images being cut off).
    – 0b10011
    Aug 12, 2014 at 14:11

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.