使输入占用所有剩余空间答案

【问题标题】：Make an input take up all the remaining space使输入占用所有剩余空间
【发布时间】：2014-07-19 07:52:22
【问题描述】：

我的问题与this question 类似，但不同。

我有一个 unknown 宽度的表格单元格。此单元格包含一个input 和一个span。 span 应该与它的内容需要一样宽，input 应该占据所有剩余空间。

我为这个看似微不足道的问题创建了一个微不足道的plunk。随机文本应位于最右侧，输入应根据需要增大或缩小以填充黄色 td。

【问题讨论】：

【解决方案1】：

尝试将黄色的<td> 拆分为自己的表格（或使用display: table-cell 等的其他元素）。

将包含输入的单元格的宽度设置为 100%，并将表格的最大宽度设置为 100%。

这将导致单元格内的表格在文本更改时重新排列。

【讨论】：

【解决方案2】：

这可以通过 Flexbox 实现。

HTML：

<td class="foo">
    <input class="foo__input">
    <span>dsflkwej</span>                
</td>

CSS：

.foo {
    display: flex
}
.foo__input {
    flex-grow: 1
}

现场演示： http://jsfiddle.net/simevidas/MhR77/

（使用 Autoprefixer 为 Flexbox 属性添加供应商前缀。）

【讨论】：

开箱即用的浏览器是什么？我有 Chromium 25 和 FF 20，但它不起作用。我手动添加了-moz- 和-webkit-，没有任何改变。
@maaartinus Firefox 当前版本为 30。您确定您拥有的是版本 20？ *** 为了在今天使用 CSS Flexbox，您必须提供供应商前缀。我推荐 Autoprefixer。您可以将其用作 CSS 构建过程的一部分（与例如缩小器、linter 等结合使用），也可以通过 online tool 复制粘贴的完整代码。
是的，我使用的是 FF 版本 20。这很可能是因为 Ubuntu 10.04。那是因为我在任何较新的 Ubuntu 中都没有发现任何真正的改进。无论如何，我会看看 Autoprefixer。