モーダルウィンドウをスクロールできるようにしたいです。

モーダルウィンドウが表示されたとき、画面に収まらなかった場合、スクロールできるようにしたいです。
id="modal"にoverflow:auto;　または、 overflow:scroll;　をつけてみたのですが、ダメでした。
アドバイス頂けないでしょうか。
宜しくお願い致します。

HTML
1<div id="mask" class="hidden"></div>
2
3<section id="modal" class="hidden">
4  <div class="modal">
5    <img src="/img/closebtn.svg" class="modal_close">
6    <div class="modal_inner">
7      <h1>プライバシーポリシー</h1>
8      <hr class="privacy_policy">
9      <div class="modal_text">
10        <h2>ほにゃらら</h2>
11        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
12      </div>
13      <div class="modal_text">
14        <h2>ほにゃらら</h2>
15        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
16      </div>
17      <div class="modal_close" id="closebtn_under">閉じる</div>
18    </div>
19  </div>
20</section>

CSS
1 .modal {
2  position: relative;
3}
4
5.modal img {
6  width: 43px;
7  height: 43px;
8  position: absolute;
9  top: -43px;
10  right: -43px;
11  z-index: 500;
12}
13
14.modal img:hover {
15  cursor: pointer;
16  opacity: 0.9;
17}
18
19#mask {
20  background: #0000004D;
21  position: fixed;
22  top: 0;
23  bottom: 0;
24  right: 0;
25  left: 0;
26  z-index: 300;
27}                                   
28
29#mask.hidden {
30  display: none;
31}
32
33#modal {
34  background: #fff;
35  width: 930px;
36  padding: 20px;
37  position: fixed;
38  top: 80px;
39  left: 0;
40  right: 0;
41  margin: 0 auto;
42  transition: 0.5s;
43  z-index: 400;
44  box-shadow: 0px 0px 3px #00000029;
45}
46
47#modal.hidden {
48  transform: translateY(-200%);
49}
50
51.modal_inner {
52  width: 817.5px;
53  margin: 0 auto;
54}
55
56.modal_inner h1 {
57  text-align: center;
58  margin: 0 auto;
59  padding-top: 65px;
60  padding-bottom: 24.5px;
61  font-size: 24px;
62  line-height: 39px;
63  font-family: 'Noto Sans JP';
64  font-weight: bold;
65  color: #707070;
66}
67
68.privacy_policy {
69  text-align: center;
70  border: solid 2px #3F51B5;
71  width: 155px;
72  margin-top:0 ;
73  margin-bottom: 48.5px;
74}
75
76.modal_text {
77  margin-bottom: 30px;
78}
79
80.modal_text h2 {
81  font-size: 20px;
82  line-height: 32px;
83  padding-left: 27.5px;
84  font-family: 'Noto Sans JP';
85  font-weight: bold;
86  color: #707070;
87  border-left: 3px solid #3F51B5;
88}
89
90.modal_text p {
91  font-size: 16px;
92  line-height: 26px;
93  padding-left: 27.5px;
94  padding-bottom: 26px;
95  font-family: 'Noto Sans JP';
96  color: #707070;
97}
98
99#closebtn_under {
100  margin: 0 auto;
101  width: 180px;
102  padding: 9px 0 8px 0;
103  font-size: 16px;
104  line-height: 26px;
105  font-family: 'Noto Sans JP';
106  font-weight: bold;
107  text-align: center;
108  text-decoration: none;
109  background: #3F51B5;
110  color: #FFF;
111  border-radius: 12px;
112  box-shadow: 0px 3px 6px #00000029;
113  margin-bottom: 20px;
114}

JQuery
1$(function(){
2    $('#modal_open').on('click',function(){
3        $('#modal').removeClass('hidden');
4        $('#mask').removeClass('hidden');
5        $('body').css('overflow','hidden');
6        
7    });
8    $('.modal_close').on('click',function(){
9        $('#modal').addClass('hidden');
10        $('#mask').addClass('hidden');
11        $('body').css('overflow','auto');
12    });
13    $('#mask').on('click',function(){
14        $('#modal').addClass('hidden');
15        $('#mask').addClass('hidden');
16        $('body').css('overflow','auto');
17    });
18});