画面を2分割して且つ別々にスクロールしたい

Question

前提・実現したいこと

https://www.w3schools.com/cssref/pr_class_display.asp
このサイトのようにメニュー領域とコンテンツ領域を2分割してそれぞれ別々でスクロールしたいのですが良い方法はありますでしょうか？

Answer 1

このサイトのようにページ全体をスクロールしてもメニューが上部に貼り付くようにするには、メニューの要素に position: sticky; top: 0px; のようにCSSを指定します。

勘違いしてました。左側のメニューのことですね。 それぞれの要素に overflow: scroll; height:100vh; などを指定すればよいです。

Answer 2

<style>
#wrap{
display:flex;
height:100%;
}
#l{
background-Color:lime;
min-width:20%;
overflow-y:scroll;
}
#r{
width:80%;
background-Color:aqua;
overflow-y:scroll;
}
</style>
<div id="wrap">
<div id="l">
l<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div id="r">
r<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>