Css 使输入占用所有剩余空间

我的问题类似，但不同

我有一个宽度未知的表格单元格。此单元格包含一个

输入

和一个

span

。

span

的宽度应满足其内容的需要，而

输入应占据所有剩余空间

我为这个看似琐碎的问题创造了一个琐碎的答案。随机文本应位于最右侧，输入应根据需要增大或缩小以填充黄色
td
尝试将黄色
拆分为其自己的表格（或使用
显示：表格单元格
等的其他元素）

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

这将导致单元格内的表格在文本更改时重新流动

基本演示：
这可以通过Flexbox实现

HTML:

现场演示：

（使用Autoprefixer为Flexbox属性添加供应商前缀。）
它在什么浏览器中开箱即用？我有铬25和FF 20，但不起作用。我已经手动添加了
-moz-
和
-webkit-
，但没有任何更改。@maaartinus Firefox目前的版本为30。你确定你有版本20吗？***为了今天使用CSS Flexbox，您必须提供供应商前缀。我建议使用自动刷新器。您可以将其作为CSS构建过程的一部分使用（与缩小器、linter等结合使用），也可以通过此复制粘贴的完整代码。是的，我使用的是FF版本20。这很可能是因为Ubuntu 10.04。这是因为我还没有发现任何更新的Ubuntu有任何真正的改进。不管怎样，我要看看自动刷新器。这个很好用。。。我现在明白了，我忘记了在真实文本中有空格（以及其他什么），但是
white space:nowrap解决了这个复杂问题。
<td class="foo">
    <input class="foo__input">
    <span>dsflkwej</span>                
</td>

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