Развернуть вход, чтобы взять оставшуюся ширину

Этот вопрос является расширением Разверните div, чтобы взять оставшуюся ширину.

Верхнее решение отлично подходит для того, чтобы div занимал оставшуюся ширину, но один я помещаю вход в левый div, который он ломает. Я ожидаю, что вход будет расширяться, чтобы заполнить оставшуюся ширину div, но вместо этого он выпрыгивает из div и помещается в нижнюю часть.

Обратите внимание, что красный квадрат правильно заполняет ширину, в то время как синий ящик фиксирован. Мне нужно поле ввода, чтобы делать то же самое, что и красное поле: заполните оставшуюся ширину.

http://jsfiddle.net/fct87qpn/

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

Ответ 1

Решение уже находится в вашей предоставленной ссылке:

.left {
    overflow: hidden;
}

JSFiddle

Другим решением будет добавление поля:

.left {
    margin-right: 200px;
}

Первый из них более гибкий.

Ответ 2

.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>