html - 文本区域最大宽度

Question

我遇到了 textarea 最大宽度的问题，我需要它在调整大小时不超过 .table-cell.two 宽度，在这个例子中:

JSfiddle example

HTML:

<div class="wrapper">
<div class="table">
    <div class="table-cell one">
        <p>small cell</p>
    </div>
    <div class="table-cell two">
        <p>textarea cell</p>
        <textarea></textarea>
    </div>
</div>

CSS:

textarea {
  max-width: 100%;
}

.wrapper {
  width: 500px;
}

.table {
  display: block;
  width: 100%;
}

.table-cell {
  display: table-cell;
  background: #E2D8C1;
  vertical-align: top;
  padding: 10px;
}

.table-cell.two {
  width: 100%;
  background: #DAC082;
}

.table textarea {
  max-width: 100%;
  width: 100%;
  height: 100px
}

请不要建议使用 javascript，需要纯 css 解决方案。

Answer 1

使用:

textarea { 
   /* will prevent resizing horizontally */
   resize:vertical;
}