如何使输入字段占用100％的未使用空间？

Question

我已经在这个小东西上转动了几个小时了。我有一个div。在该div中，我希望右侧（并排）有两个按钮，并且该行的其余部分由输入字段填充。我尝试了无数CSS选项组合，但无法弄清楚。
我需要item1和item2并排并占用父div的整个宽度。CSS专家有什么想法吗？谢谢！！

http://jsfiddle.net/vasxmg1d/

<div style="width: 50%; border: 1px solid black; height: 300px;">
    <br/>
    <div style="width: 100%">
        <input id="item1" type="text" style="width: 100%"/>
        <div id="item2">
            <button>button1</button>
            <button>button2</button>
        </div>
    </div>
</div>

Answer 1

现代方法 - Flexbox

使用 flexbox - 将包装器设置<div>为display: flex和<input>to flex: 1（有效flex-grow: 1）：

#wrapper {
    display: flex;
}
#item1 {
    flex:1;
}

http://jsfiddle.net/vasxmg1d/10/

有关 Flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

旧方法 - 通过 CSS 进行表格布局

如果您更喜欢使用表格布局，至少可以通过 CSS 来实现，而不是在 HTML 中引入表格标记（但您需要在输入周围添加一个包装器元素才能实现）

http://jsfiddle.net/vasxmg1d/12/

<div id="item1">
    <input type="text"/>
</div>

和CSS

#wrapper {
    display: table;
}
#item1,#item2 {
    display: table-cell;
    white-space: nowrap;
}
#item1 {
    width: 100%;
}
#item1>input {
    width: 100%;
}