textarea max-width when is set COLS - html

Question

it looks that textarea don't respect the css max-width when is setted to 100% and it is ok when setted to fixed pixels
<textarea cols="80">text here</textarea>
and
max-width: 100%;
or
max-width: 100px;
See the snippet code for max-width: 100%:
.table {
width: 100%;
display:table;
}
.table-cell {
display: table-cell;
padding: 10px;
width: 300px;
background: #DAC082;
}
textarea {
max-width: 100%;
}
<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
and see the snippet code for max-width: 100px:
.table {
width: 100%;
display:table;
}
.table-cell {
display: table-cell;
padding: 10px;
width: 300px;
background: #DAC082;
}
textarea {
max-width: 100px;
}
<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
Note that in the first example the textarea is overriding the css max-width 100%, I suppose it is wrong and It should be into 300px of table-cell width.
In the second example textarea stay into 100px: It works.
N.B. my browser is Firefox ESR 60.3. Is a firefox bug?

Answer 1

Have you tried
textarea {
width: 100%;
}
this worked for me and matched the width of whatever I set in .table-cell

Answer 2

Table cells have a tendency to treat their width properties as hints rather than being set in stone.
One solution is to put an extra div in the table cell around the content, and set the width of that one. Then the textarea will honour it.
.table {
width: 100%;
}
.table-cell {
display: table-cell;
padding: 10px;
background: #DAC082;
}
.table-cell>div {
width: 300px;
}
textarea {
max-width: 100%;
}
<div class="table">
<div class="table-cell">
<div>
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
</div>
Update: after it has become more clear what you want, a new solution is as follows: don't assign width properties to the table, but assign them to the content instead; then the table will mold itself to its contents rather than vice versa.
.table {
display: table;
}
.table-cell {
display: table-cell;
padding: 10px;
background: #DAC082;
}
textarea {
max-width: calc(100vw - 16px - 20px); /* = viewport - body margin - cell padding */
}
<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
The max-width of the textarea is the width of the viewport, minus the margin of the body and the padding in the cell. You can adjust this to your needs of course!