lolka_bolka lolka_bolka - 6 months ago 35
CSS Question

Textarea width issue in div

I just want to put a

textarea
into a
div
, I think it should not be a problem:

CODE



.panel {
width: 250px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #000;
}
.panel textarea {
width: 100%;
}

<div class="panel">
<textarea></textarea>
</div>





This is a very difficult code, isn't it? All of us did it thousand of times.

For some reason, this width of the
textarea
is buggy at right side. Checking the box model of
.panel
seems good.

Tried it in FF, Chrome, Edge, same result everywhere.

Can somebody explain me, why is it, and what is the solution for it?

I've made a jsFiddle just for fun.

Answer

Giving the <textarea> a box-sizing: border-box as well and a display: block should fix it:

.panel {
    width: 250px;
    border: 1px solid #000;
    box-sizing: border-box;
    padding: 10px;
}

.panel textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

JSFiddle