启用子菜单的滚动条，当窗口宽度小于它

Question

我有一个位置固定的子菜单(高度100vh)，但当子菜单大于窗口高度时，它不能正确滚动

ul {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background-color: gray;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media screen and (max-height: 424px) {
ul {
max-height: calc(100% - 20px);
overflow-y: scroll;
}
}

<div class="App">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>

Answer 1

这就是我的方法:

* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
}
.App {
height: 100%;
}
ul {
min-height: min-content;
height: 100%;
overflow: auto;
margin: 0;
background-color: gray;
text-align: center;
display: grid;
place-content: center;
}

<div class="App">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>