html - textarea 不扩展以包含内容

Question

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

#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-widthand的实验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