width: 100% making things go out of the div

Question

I have a simple div in which I have 2 textarea. I set the textarea's width to 100% but then it just go a little out of the div.

See this fiddle.

HTML:

<div class="offer_a_help">
    <textarea></textarea>
    <br/>
    <textarea></textarea>
</div>

CSS:

.offer_a_help {
    width: 350px;
    height: 250px;
    position: absolute;
    top: calc(100%/2 - 350px/2);
    left: calc(100%/2 - 250px/2);
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #bbb;
}
.offer_a_help textarea {
    width: 100%;
}

Why is that happening and what's the simplest way to fix this?

Answer 1

I believe it may be an issue with the textarea having either a border or padding. Both of those would be calculated with the 100% width and cause the width to be wider than the container.

You can add border-box to make the padding and border be calculated WITH the width instead of IN ADDITION to

Try adding:

.offer_a_help textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 2

You need to reset padding and margin (I've set margin to -1 to accomodate outer div border):

Demo

.offer_a_help textarea {
    width: 100%;
    margin: 3px -1px;
    padding: 0;
}