Css: le défilement de débordement ne fonctionne pas

Je suis tring pour mettre débordement de la propriété scroll dans un div, afin d'afficher une barre de défilement pour l'utilisateur, mais il ne fonctionne pas.

Je ne sais pas où est le problème.

Mon code est ici : http://fiddle.jshell.net/Gg9dL/

Voici le code 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>

Et voici le 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;
}

source d'informationauteur wawanopoulos

  1. 16

    Vous devez régler la hauteur de la div ou bien il va l'étendre à la hauteur de son contenu

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

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

  2. 5

    Vous avez besoin d'ajouter explicitement la hauteur .listTweets

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

    Mis à jour exemple: http://fiddle.jshell.net/Gg9dL/3/

  3. -1

    Overflow: hidden cache tout, à l'extérieur de la zone visible. L'utilisation de débordement:faites défiler pour afficher les barres de défilement. Si vous le souhaitez barre de défilement à l'écran, utilisez l'overflow-x ou overflow-y.