css - 当宽度为 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/ 如果这个 textarea 有 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;
}

演示