Keep Flex Items Fixed While Resizing Window
I am working on a web app and I need help with css. I am a beginner at css so please bear with me. I'm trying to style a fixed sidebar for an app. The sidebar occupies the full hei
Solution 1:
Just wrap .sidebar__profile in another div so it can act as a block-element rather than a shrinking flex-element...
html {
background-color: #141E30;
margin: 0;
padding: 0;
}
.sidebar {
display: flex;
flex-direction: column;
width: 300px;
top: 0;
bottom: 0;
position: fixed;
overflow: auto;
background: #0a0c0f;
color: #EAE9E9;
}
.sidebar__profile {
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar__menuitem {
padding-bottom: 10px;
display: flex;
align-items: center;
flex-shrink: 0;
height: 30px;
}
.count {
margin-left: auto;
margin-right: 20px;
border-radius: 6px;
padding: 2px5px;
background-color: #EAE9E9;
color: #0a0c0f;
}
<!DOCTYPE html><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>title</title></head><body><divclass="sidebar"><div><divclass="sidebar__profile"><imgsrc="http://chittagongit.com//images/avatar-icon/avatar-icon-4.jpg"height=50pxalt="image"class="sidebar__profile__avatar" /><divclass="sidebar__profile__name">User Name</div></div></div><divclass="sidebar__menuitem"><div>Menu Item 1</div><divclass="count">2</div></div><divclass="sidebar__menuitem"><div>Menu Item 2</div><divclass="count">2</div></div><divclass="sidebar__menuitem"><div>Menu Item 3</div><divclass="count">2</div></div><divclass="sidebar__menuitem"><div>Menu Item 4</div><divclass="count">2</div></div><divclass="sidebar__menuitem"><div>Menu Item 5</div><divclass="count">2</div></div><divclass="sidebar__menuitem"><div>Menu Item 6</div><divclass="count">2</div></div><divclass="sidebar__menuitem"><div>Menu Item 7</div><divclass="count">2</div></div></div></body></html>
Post a Comment for "Keep Flex Items Fixed While Resizing Window"