3 div's middle div take up remaining width

Use display: table:

#container {
    display: table;
    width: 100%;
}

#left, #middle, #right {
    display: table-cell;
}

#left, #right {
    width: 150px;
}

Where the #container is your parent element like in

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

Here is a Fiddle.

Check this similar answer

HTML

<div class = "container">
    <div class = "fixed">
        I'm 150px wide! Glee is awesome!
    </div>
    <div class = "fluid">
        I'm fluid! Glee is awesome!
    </div>
    <div class = "fixed">        
        I'm 150px wide! Glee is awesome!
    </div>
</div>

CSS

html, body {
    height: 100%;
    font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    display: table-cell;
    text-align: center;
}
.fixed {
    width: 150px;
    background: rgb(34, 177, 77);
    color: white;
}
.fluid {
    background: rgb(0, 162, 232);
}

DEMO

Okay using flex and based this answer

#parent {
  display: flex;
}
#left {
  width:150px;
  background-color:#ff0000;
}
#middle {
  flex: 1 1 auto;
  background-color:#00ff00;
}
#right {
  width: 150px;
  background-color:#0000ff;
}

<div id="parent">
  <div id="left">left</div>
  <div id="middle">middle</div>
  <div id="right">right</div>
</div>

This actually works if the left and right divs has variable width also.