Textarea max-width

Question

I'm having problem with textarea max-width, I need it to not exceed .table-cell.two width when resized, on this example:

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
}

Please do not advise using javascript, needed a pure css solution.

Answer 1

Use:

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

Answer 2

I have this problem too. The solution is very simple but i spend few hours for experiments... Use this two parameters at the same time in textarea element class/#element style definition (90% 30% are example values) :

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

Answer 3

For default the text area is re sizable. If you want to increase the element width, you can do it by

HTML

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

CSS

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

Demo on jsfiddle

In your case you want to fix the <textarea> size when the parent does not have a fixed size.