如何为position absolute的div添加独立垂直scrollbar并固定尺寸？

我需要让HTML中的div元素保持指定的绝对定位和尺寸布局，当div内的内容（如大量文本）超出自身尺寸时，为每个div添加独立的垂直滚动条，而非使用页面全局滚动条，同时保持div的位置与尺寸固定。

我编写了如下CSS样式：

div
{
    position: absolute;
}
div.header
{
    background-color: red;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 10%;
}
div.menu
{
    background-color: green;
    top: 10%;
    left: 0%;
    width: 20%;
    height: 80%;
}
div.main
{
    background-color: blue;
    top: 10%;
    left: 20%;
    width: 80%;
    height: 80%;
}
div.footer
{
    background-color: yellow;
    top: 90%;
    left: 0%;
    width: 100%;
    height: 10%;
}

对应的HTML文档：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="header">Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz.</div>
        <div class="menu">Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz.</div>
        <div class="main">Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz.</div>
        <div class="footer">Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz.</div>
    </body>
</html>

但内容较多时结果不符合预期，每个div都缺少滚动条，无法查看全部内容。

我尝试了flex布局方案：
CSS代码：

body{
  height:100vh;
  margin:0;
  display:flex;
  flex-wrap:wrap;
}
.container{
  overflow-y:scroll;
}
.content{
  height:1000px;
}
.header{
  width:100%;
  height:10vh;
  background-color:red;
}
.menu{
  width:20%;
  height:80vh;
  background-color:green;
}
.main{  
  width:80%;
  height:80vh;
  background-color:blue;
}
.footer{
  width:100%;
  height:10vh;
  background-color:yellow;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="container header">
            <div class="content"></div>
        </div>
        <div class="container menu">
            <div class="content"></div>
        </div>
        <div class="container main">
            <div class="content"></div>
        </div>
        <div class="container footer">
            <div class="content"></div>
        </div>
    </body>
</html>

但窗口缩小时部分div仍缺失滚动条，请问如何实现预期效果？

内容的提问来源于stack exchange，提问作者YuGiOhJCJ