<div class="container">
<div class="sidebarContainer">
<div class="sidebar">
<h1>content</h1>
</div>
</div>
<main class="main">some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text </main>
</div>
body{
margin:0;
padding:0;
}
*{
box-sizing:border-box;
}
.container{
display:flex;
width:100%
}
.sidebarContainer{
width:30%;
height:100vh;
}
.sidebar{
width:30%;
height:100vh;
background-color:blue;
position:fixed;
}
.main{
word-wrap: break-word;
width:70%;
font-size:40px;
background-color:green;
min-height:200vh;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.