CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
background-color: #F5F5F5;
}
body > header {
display: flex;
position: fixed;
width: 100%;
height: 60px;
align-items: center;
background-color: #373737;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.19);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.19);
}
aside {
width: 250px;
background-color: #484848;
font-size: 18px "SL";
margin-top: 60px;
}
aside > ul.side-menu {
list-style-type: none;
margin-top: 25px;
width: 100%;
}
aside > ul > li > a {
display: block;
text-decoration: none;
font-family: "SL";
font-size: 18px;
line-height: 40px;
padding-left: 20px;
color: #CCCCCC;
border-bottom: 1px solid #8E8E8E;
transition: 300ms;
}
aside > ul > li > a.active {
color: white;
}
HTML:
<body>
<header>
</header>
<aside>
<ul class="side-menu">
<li><a href="#" class="active">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
</ul>
</aside>
</body>
Codepan:
https://codepen.io/UADev/pen/zzmdPG
Upon expanding to fullscreen, the following behavior is observed:
https://i.sstatic.net/j6omE.png
An attempt was made to use height: 100% on both the body and html elements, however it did not work as expected when there was another flex element with flex-wrap: wrap inside one of the child elements like aside or section. Removing the display:flex property from one of those elements caused layout issues, yet resolved the problem.