当宽度为100%时，添加到元素的滚动条

Question

我很好奇为什么overflow: auto;规则在这种情况下会添加滚动条

CSS：

textarea {
    width: 100%;
    margin:0;
    padding:0;
}
.span4 {
    width: 300px;
}
aside {
    overflow: auto;
}

html:

<aside class="span4">    
    <textarea cols="40" rows="20"></textarea>       
</aside>

http://jsfiddle.net/ZnsW9/如果这个文本区域有100%的宽度，并且没有边距和填充，那怎么会溢出容器框呢？

Answer 1

用于box-sizing

textarea {
            width: 100%;
            margin:0;
            padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
        }

演示

Answer 2

由于边界的原因添加了滚动条。将border: none;规则添加到文本区域：

textarea {
    width: 100%;
    margin:0;
    padding:0;
    border: none;
}

演示