overflow: scroll;　がうまく設定できない。

開閉メニューボタンを作成しています。
メニューボタンをクリックしたあとに開く、メニューリストを、スクロールバーで表示したいです。
overflow: scroll;　を　つけてみたものの、うまく装着できません。
画面サイズを小さくすると、メニューリストの下の方にある内容を見ることが出来ません。
色々な場所に指定してみましたが、うまく作動しません。
以下の内容にてhtml、cssを作成しています。
どこを修正すればうまく稼働しますか？
IE11以上で稼働確認をしたいです。すみませんがご教授ください。

【html】
<article class="top-menu">
<label for="menu-btn">
<input id="menu-btn" type="checkbox" class="menu-btn_check">
<menu><p class="menu-p">MENU</p>
<ul class="menu_list">
<li>
<img src="" width="35" height="35" alt=""/>HOME
<ul>
<li><a href="#">本店</a></li>
<li><a href="#">〇〇支店</a></li>
<li><a href="#">〇〇支店</a></li>
</ul>
</li>
<li>
<img src="" width="35" height="35" alt=""/>HOME
<ul>
<li><a href="#">本店</a></li>
<li><a href="#">〇〇支店</a></li>
<li><a href="#">〇〇支店</a></li>
</ul>
</li>
<li>
<img src="" width="35" height="35" alt=""/>HOME
<ul>
<li><a href="#">本店</a></li>
<li><a href="#">〇〇支店</a></li>
<li><a href="#">〇〇支店</a></li>
</ul>
</li>
<li>
<img src="" width="35" height="35" alt=""/>HOME
<ul>
<li><a href="#">本店</a></li>
<li><a href="#">〇〇支店</a></li>
<li><a href="#">〇〇支店</a></li>
</ul>
</li>
<li>
<img src="" width="35" height="35" alt=""/>HOME
<ul>
<li><a href="#">本店</a></li>
<li><a href="#">〇〇支店</a></li>
<li><a href="#">〇〇支店</a></li>
</ul>
</li>
<li>
<img src="" width="35" height="35" alt=""/>HOME
<ul>
<li><a href="#">本店</a></li>
<li><a href="#">〇〇支店</a></li>
<li><a href="#">〇〇支店</a></li>
</ul>
</li>
</ul>
</menu>
<div class="overlay"></div>
</label>
</article>

【CSS】

{
margin : 0;
padding : 0;
color : #444;

}
p {
text-align: justify;
/↓↓IEで「text-align: justify」が効かない場合の対策↓↓/
text-justify: inter-ideograph;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
a:hover,a:focus {
text-decoration: none;
}
/ここから下がメニューの設定/
.top-menu {
height: 90px;
background: transparent;
padding: 0px 10px;
text-align: left;
}
.menu-btn_check{
display : none;/チェックするまで非表示/
}
menu{
position: fixed;
right: 10px;
top: 20px;
width: 90px;
height: 50px;
padding: 0px;
margin: 0px;
border-radius: 7px;
border: 3px solid #fff;
background : #001a00;
}
menu:hover,menu:focus {
background-color: #66cc00;
cursor: pointer;
}
menu::after {/メニューボタン内の三本線をつくる/
right: 0;
top: 11px;/menuﾎﾞﾀﾝ高さ50/2＝25、ﾌｫﾝﾄｻｲｽﾞ35/2＝14、25-14=11/
font-size: 35px;
font-weight: bold;
position : absolute;
z-index : 30;
content : '\2261';/三本線/
padding: 0px;
color : #fff;
background : transparent;
}
.menu-btn_check:checked + menu::after {
content : '×';/三本線から表示を変えた閉じるボタンをつくる/
}
.menu-p {
display: table-cell;
height: 50px;
width: 90px;
vertical-align: middle;
text-align: left;
color: #fff;
margin: 0px;
padding: 1px 7px;
font-size: 16px;
font-weight: bold;
transform: scaleY(1.5);
}
.menu-btn_check:checked + menu{
/* 隠しメニューを表示時のメニューの設定 /
z-index : 20;
cursor: pointer;
}
.menu-btn_check:checked + menu + div.overlay{
/ 隠しメニューが表示されているときに画面全体を覆うブロックを表示。
これでメニュー部分（z-index : 20;）を除いて
画面全体がチェックボックス（メニューボタンエリア）をクリックすることに
なるため、メニュー以外の部分をクリックするとメニューが閉じるという仕組み*/
position : fixed;
top : 0;
bottom : 0;
left : 0;
right : 0;
z-index : 10;
background : rgba(0,0,0,0.7);/末尾0.7で半透明の指示/
}
.menu-btn_check:checked + menu .menu_list{
display: block;
overflow: scroll; /メニューが見切れた時（縦）にスクロールバーを表示/
}
menu .menu_list{
position: absolute;
padding: 0px;
margin: 0px;
top : 60px;
right : 0;
display: none;
overflow: scroll; /メニューが見切れた時（縦）にスクロールバーを表示/
}
.menu_list li{
background : #fff;
border-top: 1px solid #999;
margin: 0px;
padding: 5px 22px 5px 40px;
min-width : 105px;
max-width : 350px;
white-space : nowrap;
text-overflow : ellipsis;/内容が長い場合、省略記号”･･･”を表示/
}
.menu_list li:last-child {
border-bottom: 1px solid #999;
}
.menu_list li a{
display : block;
color: #333;
padding : 0px 10px;
}
.menu_list li a:hover,.menu_list li a:focus {
background: #deffc2;
}
.menu_list li ul li {
border-top: none;
margin: 0px;
padding: 0px;
}
.menu_list li ul li:last-child {
border-bottom: none;
}

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょうか。

css
1/*前略*/
2
3.menu-btn_check:checked + menu .menu_list{
4  display: block;
5/*  overflow: scroll;  削除*/
6}
7menu .menu_list{
8  position: absolute;
9  padding: 0px;
10  margin: 0px;
11  top    : 60px;
12  height: calc(100vh - 90px); /* 追加 */
13  right  : 0;
14  display: none;
15  overflow: auto; /* scroll を auto に変更 */
16}
17
18/* 後略 */

.menu_list の高さは画面の高さを基準にして適切に設定。
高さを設定しないとスクロールバーは現れません。

あと、overflow: scroll; だとスクロールバーが表示しっぱなしになるので見苦しい。
overflow: auto; にすれば必要な時だけ表示されます。

投稿2020/08/04 13:27

編集2020/08/04 13:30

hatena19

総合スコア33715

chie_123

2020/08/04 13:49

早速のご回答ありがとうございます！表現したい通りのスクロールバーを装着することができました。そして、分かりやすい説明で、ものすごく納得しました。 menu_listの高さ設定がポイント・・・しかもcalcで計算して・・・また、いつもスクロールバーを表示させたいときはoverflow: scroll;で設定していたので、教えてくださったautoの設定、今後使わせていただきます。とてもお勉強になります。本当にありがとうございました。

行動規範の内容に同意します