/* Side Bar */
#sidebar {
box-sizing: border-box;
display: flex;
position: fixed;
justify-content: space-around;
flex-direction: column;
overflow-y: scroll;
left: 0;
bottom: 0;
background: blueviolet;
height: 92%;
width: 17%;
margin: 0 auto;
padding-left: 10px;
}
.side, .subs {
padding: 5px;
margin-left: 5px;
}
#things, #others, #subscriptions {
box-sizing: border-box;
display: flex;
flex-direction: column;
padding-bottom: 10px;
}
#things div, #others div, #subscriptions div {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
#things div i, #others div i, #subscriptions div i {
margin-right: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- sidebar -->
<div id="sidebar">
<div id="things">
<div><i ></i><p>Home</p></div>
<div><i ></i><p>Explore</p></div>
<div><i ></i><p>Shorts</p></div>
<div><i ></i><p>Subscriptions</p></div>
</div>
<div id="others">
<div><i ></i><p>Library</p></div>
<div><i ></i><p>History</p></div>
<div><i ></i><p>Your Videos</p></div>
<div><i ></i><p>Watch later</p></div>
<div><i ></i><p>Liked Videos</p></div>
<div><i ></i><p>Show more</p></div>
</div>
<div id="subscriptions">
<h4 >SUBSCRIPTIONS</h4>
<div><i ></i><p>TKA Team</p></div>
<div><i ></i><p>Freecodecamp</p></div>
<div><i ></i><p>Crypto Gurus</p></div>
</div>
</div>
How can I prevent the elements from overflowing the container from the top even when the browser is resized?
PS: I want to leave the items centered. Thank you.
CodePudding user response:
reset padding
, margin
, and box-sizing
at the top of the scope -
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#sidebar {
box-sizing: border-box;
display: flex;
position: fixed;
justify-content: space-around;
flex-direction: column;
overflow-y: scroll;
left: 0;
bottom: 0;
background: blueviolet;
height: 92%;
width: 17%;
margin: 0 auto;
padding-left: 10px;
}
.side, .subs {
padding: 5px;
margin-left: 5px;
}
#things, #others, #subscriptions {
box-sizing: border-box;
display: flex;
flex-direction: column;
padding-bottom: 10px;
}
#things div, #others div, #subscriptions div {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
#things div i, #others div i, #subscriptions div i {
margin-right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="sidebar">
<div id="things">
<div><i ></i><p>Home</p></div>
<div><i ></i><p>Explore</p></div>
<div><i ></i><p>Shorts</p></div>
<div><i ></i><p>Subscriptions</p></div>
</div>
<div id="others">
<div><i ></i><p>Library</p></div>
<div><i ></i><p>History</p></div>
<div><i ></i><p>Your Videos</p></div>
<div><i ></i><p>Watch later</p></div>
<div><i ></i><p>Liked Videos</p></div>
<div><i ></i><p>Show more</p></div>
</div>
<div id="subscriptions">
<h4 >SUBSCRIPTIONS</h4>
<div><i ></i><p>TKA Team</p></div>
<div><i ></i><p>Freecodecamp</p></div>
<div><i ></i><p>Crypto Gurus</p></div>
</div>
</div>
</body>
</html>