I am using a front end framework that uses a flex layout. I started creating an admin page where I have sidebar, header, main sections. I want the sidebar and the header + main section to work independently. So if the sidebar has more data than the site of the browser window, it should use a scrollbar - but always try to fill up the whole space, so should have a height: 100%. The header + main sections should have a scrollbar, but the header should not be sticky - it should stay at the top even if the main section has lots of content.
I actually managed to accomplish this by adding overflow: initial to the main section - instead of overflow: auto. So the scrollbar is now appearing on the side of the whole container, not just on the side of the main section. However, by doing this, the sidebar doesn't get 100% height - if the main section has more content.
How can we fix this by not changing too much on the flex layout? I know for example, by making the sidebar fixed, it will kinda fix the problem, but isn't there a better, more elegant way of doing it?
html, body {
margin: 0px;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 0;
-webkit-box-direction: normal;
height: 100%;
}
.aside {
-webkit-transition: margin-left 0.5s ease-in-out;
transition: margin-left 0.5s ease-in-out;
overflow: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 260px;
background: #333;
height: 100%;
color: #fff;
}
.scrollbar {
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
overflow: hidden;
position: fixed;
overflow: hidden;
position: relative;
}
.vertical {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column;
}
.header {
color: #333;
line-height: 50px;
text-align: left;
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
height: 50px;
background: #999;
}
.main {
background-color: #e9eef3;
color: #333;
font-family: "Open Sans", sans-serif;
display: block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
overflow: initial;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
}
.card {
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}<html>
<head>
</head>
<body>
<div class="container">
<aside class="aside">
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
bar<br>
</aside>
<section class="container vertical">
<header class="header">
</header>
<main class="main">
<div class="card">
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
foo<br>
</div>
</main>
</section>
</div>
</body>
</html>
