使输入占用所有剩余空间

Question

My problem is similar to this question , but different.

I have a table cell of an unknown width. This cell contains an input and a span . The span should be as wide as its contents needs and the input should take all the remaining space .

I've created a trivial plunk for this seemingly trivial question. The random text should be on the very right and the input should grow or shrink as needed to fill the yellow td .

Answer 1

Try splitting the yellow <td> into its own table (or other elements using display: table-cell , etc).

Set the width of the cell containing the input to 100%, and set the max-width of the table to 100%.

That will cause the table inside the cell to re-flow when the text changes.

Basic demo: http://plnkr.co/edit/ao4at9RHg8VgRrgtmTqu?p=preview

Answer 2

This can be achieved with Flexbox.

HTML:

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

CSS:

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

Live demo: http://jsfiddle.net/simevidas/MhR77/

(Use Autoprefixer to add vendor prefixes for Flexbox properties.)