css - 展开输入以占用剩余宽度

Question

这个问题是Expand a div to take the remaining width的延伸.

顶级解决方案非常适合让 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>

Answer 1

解决方案已在您提供的链接中:

.left {
    overflow: hidden;
}

JSFiddle

另一种解决方案是添加边距:

.left {
    margin-right: 200px;
}

不过，第一个更灵活。