How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Question

I have the following CSS and HTML snippet being rendered.

<

Answer 1

I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

Or if you want to give the textarea a border:

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}