Expand input to take remaining width

Question

This question is an extension of Expand a div to take the remaining width.

The top solution works great for having a div take up the remaining width, but one I place an input in the left div it breaks. My expectation is that the input would expand to fill the remaining width of the div but instead it jumps out of the div and is placed in the bottom.

Note the red box correctly fills the width while the blue box is a fixed with. I need an input box to be doing the same as the red box: fill the remaining width.

http://jsfiddle.net/fct87qpn/

<div class="container">
    <div class="right"></div>
    <div class="left">
        <input type="text" class="text"/>
    </div>
</div>

Answer 1

.container {
    position:relative;
    width:100%;
    height:200px;
    border:1px solid;
}
.right {
    height:200px;
    width:200px;
    background:green;
    float:right;
}
.left {
    width:-webkit-calc(100% - 200px);
    height:178px;
    background:red;
}
.text{
    position:relative;
    width:100%;
    height:20px;
    margin:0;
    border:0;
    top:178px;
}

<div class="container">
    <div class="right"></div>
    <div class="left">
        <input type="text" class="text"/>
    </div>
</div>

Answer 2

The solution is already in your provided link:

.left {
    overflow: hidden;
}

JSFiddle

Another solution would be to add a margin:

.left {
    margin-right: 200px;
}

The first one is more flexible, though.