Menu
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; } 
211
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
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/
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
