Scrollbar added to an element when width is 100%

Question

I'm curious why overflow: auto; rule adds scrollbar in this case

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/ If this textarea has 100% width, and without margins and paddings, how is that overflowing the container box?

May be this http://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property will get handy... — Hiren Pandya, Jul 10 '13 at 10:57

score 7 · Accepted Answer · answered Jul 10 '13 at 10:54

7

Used to box-sizing

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

        }

Demo

answered Jul 10 '13 at 10:54

Rohit Azad Malik

31,410
17
69
97

thanks, this box-sizing seems like a wonderful thing, I just can't beleive that still it can't be used in firefox without -moz- prefix – Zed Jul 10 '13 at 10:59

score 1 · Answer 2 · answered Jul 10 '13 at 10:52

1

Scrollbar is added because of border. Add border: none; rule to textarea:

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

Demo

answered Jul 10 '13 at 10:52

mishik

9,973
9
45
67

Scrollbar added to an element when width is 100%

2 Answers2