html - columns - textarea size

Textarea max-width

Question

Estoy teniendo problemas con textarea max-width, lo necesito para no exceder .table-cell.two width cuando se cambia el tamaño, en este ejemplo:

Ejemplo de 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
}

Por favor no aconseje usar javascript, necesita una solución css pura.

Answer 1

Para textarea puedes configurar

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

y en css

textarea { height: auto; }

Answer 2

Por defecto, el área de texto es redimensionable. Si quieres aumentar el ancho del elemento, puedes hacerlo

HTML

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

CSS

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

Demo en jsfiddle

En su caso, desea corregir el tamaño de <textarea> cuando el padre no tiene un tamaño fijo.

Answer 3

Tengo este problema también. La solución es muy simple, pero dedico pocas horas a experimentos ... Use estos dos parámetros al mismo tiempo en la definición de estilo de elemento / # elemento de área de texto (90% 30% son valores de ejemplo):

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

Answer 4

Utilizar:

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