输入占用所有剩余空间

Question

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

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

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

Answer 1

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

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

当文本发生变化时，这将导致单元格内的表重新流动。

基本演示： http://plnkr.co/edit/ao4at9RHg8VgRrgtmTqu?p=preview

Answer 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属性添加供应商前缀。）