html - textarea 不会扩展以包含内容

Question

如何让两个文本区域动态填充指定的空间。在实际页面上，第二个文本区域不换行，所以它的宽度无关紧要。但是，我怎样才能使带有数字的框扩展到最长的数字行所需的确切宽度？

#container{
  width:250px;
  border:1px solid black;
}
textarea{
  float:left;
  height:150px;
  font-family:monospace;
  text-align:right;
}
#t1{
  width:auto;
  min-width:10px;
  max-width:50px;
  margin-right:4px;
}
#t2{
}

width:auto 似乎不起作用。我对 min-width 和 max-width 的实验也是徒劳的。

JSBIN

Answer 1

尝试使用具有百分比宽度的 box-sizing: border-box:

textarea {  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
}

移除#t1 和#t2 的特定样式，您可以根据需要为每个样式指定宽度，总和为100%。

更新的 jsbin:http://jsbin.com/udeLafO/19/edit