Dynamic Sized Textbox between two static DIV's - html

Question

I am trying to create a textbox that spans the entire width of my middle column. Whenever I set the width of the textbox to 100% though it drops below the divs and doesnt look good. How do I keep the textbox contained in the middle DIV and have it be 100% of the middle DIV?
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">
<div>
<input type="text" style=""/>
</div>
</div>
CSS
.leftsidebar { width: 60px; background:red; float:left; }
.rightsidebar { background:blue; width: 170px; float:right; }
.content { width: auto;background:yellow; }
.content input[type='text'] { width: 100%; }
http://jsfiddle.net/v0mp0wgm/

Answer 1

You can achieve this using flexbox. First, you want to create a containing div for your content, then assign it display: flex;. After that, move your .content div between the left and right sidebar and remove their floats. Then, give your .content and .content input[type='text'] classes a width of 100%; and you should be good to go.
.container {
display: flex;
}
.leftsidebar { width: 60px; background:red; }
.rightsidebar { background:blue; width: 163px;}
.content { width: auto; background:yellow; width: 100%; }
.content input[type='text'] { width: 100%; }
<div class="container">
<div class="leftsidebar">a</div>
<div class="content">
<div>
<input type="text" style=""/>
</div>
</div>
<div class="rightsidebar">b</div>
</div>
JSFiddle

Answer 2

One option is to apply float:left to everything and use calc() :
.leftsidebar {
float:left;
width: 60px;
background:red;
}
.content {
float:left;
width: calc(100% - 60px - 170px);
background:yellow;
}
.rightsidebar {
float:left;
width: 170px;
background:blue;
}
.content input[type='text'] {
display: block;
width: 100%;
}
<div class="leftsidebar">a</div>
<div class="content">
<div>
<input type="text" />
</div>
</div>
<div class="rightsidebar">b</div>