<body>
<div class="wrapper">
<aside>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</aside>
<main>
<div class="wrapper_inner">
<p>
Non enim praesent elementum facilisis. Facilisis volutpat est velit egestas dui id ornare. Lobortis mattis aliquam faucibus purus. Volutpat consequat mauris nunc congue nisi vitae. Quis auctor elit sed vulputate. Nisl nisi scelerisque eu ultrices vitae auctor eu. Imperdiet sed euismod nisi porta lorem. Sed faucibus turpis in eu mi bibendum neque. Id eu nisl nunc mi. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
</p>
<p>
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
</p>
</div>
</main>
</div>
</body>
body {
overflow: hidden;
height: 100vh;
}
main {
overflow-y: auto;
}
ul {
list-style: none;
}
li {
color: #fff;
}
aside {
border-right: 1px solid #ededed;
background: #36c;
flex: 1 0 10%;
padding: 1rem;
}
.wrapper {
display: flex;
height: 100%;
}
@media (max-width: 500px) {
.wrapper {
flex-direction: column-reverse;
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.wrapper_inner {
width: 90%;
margin: 0px auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.