ボックス内でスクロールをすると下のほうが見切れてしまうのを解決したい

HTMLとCSSの勉強をしています。
以下のようなデザインなのですが、画面のスクロールを禁止にすると、ウィンドウの縦サイズを縮めたときに、緑のTESTリストボックス上でスクロールすると下の方のリストボックスが見切れたり見えなくなったりしてしまいます。
緑のTESTリストボックス上でスクロールしても全部の緑のTESTリストボックスが見えるようにするにはどうしたらいいでしょうか？

なかなか打開できず時間がかかってしまっています。
気になっているのは、
「リストタグ内などはどうしても高さを持ってしまったりして、ある一定より縮めると、見切れてしまうのは仕方がないことなのかな。。」とも思っています。

恐れ入りますが、
緑のTESTリストボックス上でスクロールしても全部の緑のTESTリストボックスが見えるようにする方法
がわかる方教えていただけますと幸いです。

codePen
css 58~60行目をコメントアウトするとはみ出ている部分が見れます

html
1
2<!DOCTYPE html>
3  <!DOCTYPE html>
4  <html lang="ja">
5  <head>
6  <meta charset="utf-8" />
7  <link rel="stylesheet"  href="css/common.css">
8  <link rel="stylesheet"  href="css/home.css">
9  <title></title>
10  </head>
11  <body>
12    <header class="shadow">
13      <p class="logo"><span class="logo_light"></span></p>
14    </header>
15    <main>
16      <div class="select_test_area shadow">
17        <h2 class="font-YuGothic">TEST</h2>
18        <div class="wrapper">
19          <div class="test_notes font-hiragino">
20            <p class="title main_color">TEST</p>
21            <p class="ditale main_color">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>
22          </div>
23          <div class="test_list font-hiragino">
24            <ul>
25              <li class="main_color_back">
26                  <p class="title">TEST</p>
27              </li>
28              <li class="main_color_back">
29                  <p class="title">TEST</p>
30              </li>
31              <li class="main_color_back">
32                  <p class="title">TEST</p>
33              </li>
34              <li class="main_color_back">
35                  <p class="title">TEST</p>
36              </li>
37              <li class="main_color_back">
38                  <p class="title">TEST</p>
39              </li>
40              <li class="main_color_back">
41                  <p class="title">TEST</p>
42              </li>
43              <li class="main_color_back">
44                  <p class="title">TEST</p>
45              </li>
46              <li class="main_color_back">
47                  <p class="title">TEST</p>
48              </li>
49            </ul>
50
51          </div>
52        </div>
53      </div>
54    </main>
55
56  </body>
57  </html>

common.css

css
1/*--------------------------------------------------------------
2   RESET
3--------------------------------------------------------------*/
4html{color:#000;background:#fff;height:100%}
5body{height:100%}
6body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure{margin:0;padding:0}
7table{border-collapse:collapse;border-spacing:0}
8fieldset,img{border:0}
9address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
10ol,ul,li{list-style:none}
11caption,th{text-align:left}
12h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
13q:before,q:after{content:''}
14abbr,acronym{border:0;font-variant:normal}
15sup{vertical-align:text-top}
16sub{vertical-align:text-bottom}
17input,textarea,select{font-size:inherit;font-weight:inherit;}
18legend{color:#000}
19*{zoom: 1; z-index: 0;}
20img{vertical-align: bottom;}
21:focus{outline:none;}
22a { text-decoration: none; }
23
24button, input, select, textarea {
25  font-family : inherit;
26  font-size   : 100%;
27}
28
29.clear { clear: left;}
30.clearBoth { clear: both;}
31
32input[type="submit"]::-webkit-search-decoration,
33input[type="button"]::-webkit-search-decoration {
34  display: none !important;
35}
36input[type="submit"],
37input[type="button"] {
38  -webkit-box-sizing: content-box;
39  -webkit-appearance: button;
40  appearance: button;
41  box-sizing: border-box;
42  cursor: pointer;
43}
44
45.main_color {
46  color: green;
47}
48
49.main_color_back {
50  background-color: green;
51}
52
53.shadow {
54  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);
55}
56
57/* スクロールさせない */
58html, body{
59  overflow: hidden;
60}
61
62/*--------------------------------------------------------------
63    header
64--------------------------------------------------------------*/
65header {
66  width: 100%;
67  height: 70px;
68  background-color: #F2F2F2;
69  float: left;
70}
71
72header img {
73  width: 50px;
74  float: left;
75}
76
77header .logo {
78  float: left;
79  font-family: 'Oswald', sans-serif;
80  font-weight: bold;
81  color: #000;
82  font-size: 30px;
83}
84
85header .logo_light {
86  font-weight: lighter;
87}
88
89header a {
90  width: 150px;
91  height: 40px;
92  float: right;
93  text-align: center;
94  line-height: 40px;
95  margin-top: 15px;
96  margin-right: 30px;
97  background-color: #FFF;
98    border-radius: 20px;
99}
100
101/*--------------------------------------------------------------
102    Font
103--------------------------------------------------------------*/
104@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500;700&display=swap');
105
106.font-YuGothic {
107  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important;
108}
109.font-hiragino {
110  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
111}
112
113/*--------------------------------------------------------------
114    scrollbar
115--------------------------------------------------------------*/
116::-webkit-scrollbar{
117  width: 10px;
118}
119::-webkit-scrollbar-track{
120  background: #EFFCFF;
121  border: none;
122  border-radius: 10px;
123}
124::-webkit-scrollbar-thumb{
125  background: green;
126  border-radius: 10px;
127  box-shadow: none;
128}

home.css

```css

main {
width: 100%;
height: 100%;
background-color: #504d4d;
display: flow-root;
}

h2 {
padding: 5%;
color: #717171;
font-size: 1.7vw;
font-weight: bold;
}

.select_test_area {
width: 32%;
height: auto;
max-height: 90%;
margin: 15px 0 auto 20px;
text-align: center;
background-color: #FFF;
float: left;
}

.select_test_area .wrapper {
width: auto;
/* max-height: 74vh; */
margin: auto;
padding: 2%;
}

.test_notes {
width: 80%;
height: auto;
margin: auto;
padding: 5%;
background-color: #EFFCFF;

}

.test_notes img {
width: 50px;
display:inline-block;
vertical-align: middle;
}

.test_notes .title {
width: 65%;
text-align: left;
font-size: 1.6vw;
padding: 0 5%;
display:inline-block;
vertical-align: middle;
}

.test_notes .ditale {
text-align: left;
font-size: 1.2vw;
margin: 10% 0;
}

.test_list {
width: 83%;
height: auto;
max-height: 35.5vh;
margin: auto;
margin-bottom: 20px;
background-color: #EFFCFF;
overflow: scroll;
overflow-x: hidden;
}
.test_list ul {
border-bottom: 1% solid #376CA3;
}

.select_test_area li {
text-align: left;
padding: 1%;
border-top: 1px solid #376CA3;
border-right: 1px solid #376CA3;
border-left: 1px solid #376CA3;
}
.test_list img {
width: 4vh;
padding: 0 1%;
display:inline-block;
vertical-align: middle;
}