Arthur Lutkevichus Arthur Lutkevichus - 6 months ago 18
HTML Question

Textarea max-width

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

Use:

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