自动调整文本框的大小以适应可用空间

Question

我可以使用固定大小的行div来自动调整大小以获取可用空间，但行div中的所有内容都在同一行中？ （下面的第一行将与第二行具有相同的宽度，因为第二行中的输入会自动缩小）。

<div class="row"> 
    <input type="text" /> 
</div> 

<div class="row"> 
    <span class="leftText">Text</span> 
    <input type="text" /> 
</div> 

http://jsfiddle.net/CqCax/

Answer 1

试试这个

- HTML

<div class="row"> 
    <input type="text" /> 
</div> 

<div class="row"> 
    <span class="leftText">Text</span> 
    <input type="text" /> 
</div> 

- CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.row { 
    display:table; 
    width: 200px; 
} 
span { 
    width: 1%; 
    padding-right: 10px; 
} 
input, span { 
    display:table-cell; 
} 
input { 
    width: 100%; 
} 

http://jsfiddle.net/9aAse/4/

它有点怪异的方式寿。

Answer 2

当然可以。

display: -webkit-flex; 

全码： http://jsfiddle.net/frapporti/gXLeK/