I want to create some thing like a small feed in a small box(div)in the corner of my website, How can i do it ? how can i do this small box that can fit a lot of divs and make it scrollable?
.feed{
height:30%;
overflow-y: scroll;
width: 200px;
position: fixed;
bottom:0px;
left:0px;
}<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<div class="feed">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>The point is using overflow: scroll for big div style. It does scroll horizontally and verticaly. If you want to just scroll horizontally, use overflow-y:scroll. And if you want to just scroll verticaly , use overflow-y:scroll. So try this:
.big-div{
height: 100px;
overflow: scroll;
}<div class="big-div">
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
<div>List item</div>
</div>Use overflow: scroll. You might want to hide the scrollbar as well, you can do it as follow:
.container {
overflow: hidden;
height: 100px;
width: 100px;
}
.scroll-container {
box-sizing: border-box;
height: 100%;
width: calc(100% + 50px);
overflow-y: scroll;
}<div class="container">
<div class="scroll-container">
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
<div> feed </div>
</div>
</div>