JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="sidebar">
<p>Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
</div>
<div id="container1">
<div id="container2">hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
<br/>here
<br/>hello
<br/>I
<br/>am
...
CSS
html, body {
height: 99%;
overflow:hidden;
}
* {
margin:0;
}
.sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
width: 250px;
padding:10px;
background-color: #cc0000;
color: #ffffff;
}
#container1 {
margin-left: 280px;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#container2 {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: -15px;
overflow: auto;
}