Максимальная ширина текста

У меня проблема с max-width textarea, мне нужно, чтобы он не превышал ширину .table-cell.two при изменении размера: в этом примере:

Пример JSfiddle

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.

Ответ 1

Использование:

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

Ответ 2

По умолчанию текстовая область становится значимой. Если вы хотите увеличить ширину элемента, вы можете сделать это с помощью

HTML

<textarea rows="4" cols="50">Content here</textarea>

CSS

max-width: 300px;
max-height:300px

Демо на jsfiddle

В вашем случае вы хотите исправить размер <textarea>, если родительский элемент не имеет фиксированного размера.

Ответ 3

У меня тоже есть эта проблема. Решение очень просто, но я провожу несколько часов для экспериментов... Используйте эти два параметра в то же время в определении стиля элемента element/# элемента textarea (90% 30% являются примерными значениями):

.textarea {
    width:90%;
    max-width:90%;
    max-height:30%;
}

Ответ 4

Для textarea вы можете установить

<textarea rows="5"></textarea>

и в css

textarea { height: auto; }