CSS 2 fluid 1 fixed column

Question

I am trying to achieve this layout.

1. left column fixed size

2. right column fluid, it may have x number of elements inside, for example up to 4 divs 50px wide (this is done dynamically) so it must be max 200px wide, or if it has 3 such elements, then it must be 150px wide...

3. center column fluid, takes all the rest space

The closest I have comes is this:

#container {
    overflow:hidden;
    width: 100%;
}

#leftcol {
    border: 1px solid #0f0;
    float: left;
    width: 80px;
}

#rightcol {
    border: 1px solid #0f0;
    float: right;
   
}

#centercol {
    border: 1px solid #000;
    margin-left: 80px;

}
.box{
  width:50px;
  height:20px;
  background:red;
  float:left;
}

<div id="container">

  <div id="leftcol">
    fixed 80px
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  <div id="centercol">
    fluid center
  </div>

</div>

but center fluid is not correct width.

I can change some html if it will be easier to achieve desired effect.

Answer 1

You can do it with the Flexbox:

body {margin: 0}

#container {
  display: flex; /* displays flex-items (children) inline */
  overflow: hidden;
}

#leftcol {
  border: 1px solid #0f0;
  width: 80px;
}

#centercol {
  flex: 1; /* takes the remaining horizontal space */
  border: 1px solid #000;
}

#rightcol {
  display: flex;
  border: 1px solid #0f0;
  max-width: 200px; /* adjust to your needs */
}

.box {
  width: 50px;
  height: 20px;
  background: red;
}

<div id="container">
  <div id="leftcol">
    fixed 80px
  </div>
  <div id="centercol">
    fluid center
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
</div>