Css: overflow scroll doesn't work

Question

I am tring to put overflow scroll property into a div, in order to show a scroll bar for the user, but it doesn't work.

I don't know where is the problem.

My code is here : http://fiddle.jshell.net/Gg9dL/

Here is the HTML :

<div class="col">
            <div class="box-5">
                <div class="box-menu">
                    <img src="src/ui_dashboard/img/ic_action_twitter.png" id="imgIntoMenu"><span id="textMenu">Tweets from</span>
                    <div class="listTweets">
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                        <div class="tweetItem" id="tweetItem">toto</div>
                    </div>
                </div>
            </div>
        </div>

And here is the CSS :

.col {
    float: left;
    width: 33%;
    margin: 0;
    padding: 0;
}

.containerBloc {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 280px;
}

.box-1,.box-2,.box-3,.box-4 {
    margin: 1%;
    min-height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #B0B0B0;
}

.box-1,.box-2 {
    height: 200px;
}

.box-1,.box-3 {
    width: 98%;
    height: 350px;
}

.box-2,.box-4 {
    width: 98%;
    height: 200px;
}

.box-5 {
    margin: 1%;
    min-height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #B0B0B0;
    float: right;
    height: 204px;
    width: 98%;
}

.box-menu {
    background-color: #EFEFEF;
    height: 40px;
    color: #B0B0B0;
    border-bottom: 1px solid #B0B0B0;
}

#imgIntoMenu {
    margin-left: 10px;
    margin-top: 4px;
}

#textMenu {
    margin-left: 10px;
    position: absolute;
    margin-top: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 11pt;
}

.tweetItem{
    background-color: blue;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
    height: 70px;
}

.listTweets {
    overflow : scroll;
}

Musa · Accepted Answer · 2014-01-02 16:34:53Z

45

You have to set a height to the div or else it will expand to the height of its contents

.listTweets {
    overflow : scroll;
    height: 200px;
}

http://fiddle.jshell.net/Gg9dL/1/

answered Jan 2, 2014 at 16:34

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vadorequest Over a year ago

Not that setting a height in % may not work, it works fine using vhthough.

Brian White Over a year ago

How would someone add a scrollbar to a div that is deep inside a dialog layout with size controlled by "flex"? There's no fixed height and it's not practical to add height to every surrounding div but the scrollbar is necessary because the space is likely not large enough for its text content.

veddermatic · Accepted Answer · 2014-01-02 16:34:28Z

12

You need to add an explicit height to your .listTweets

.listTweets {
    overflow : scroll;
    height: 200px;
}

Updated example: http://fiddle.jshell.net/Gg9dL/3/

answered Jan 2, 2014 at 16:34

veddermatic

1,0827 silver badges16 bronze badges

Comments

Michal · Accepted Answer · 2014-01-02 16:35:00Z

1

Overflow: hidden hides everything outside of visible area. Use overflow:scroll to display the scrollbars. If you want a specific scrollbar to display, use overflow-x or overflow-y.

answered Jan 2, 2014 at 16:35

Michal

7532 gold badges6 silver badges23 bronze badges

Collectives™ on Stack Overflow

Css: overflow scroll doesn't work

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related