使用 flexbox 进行垂直对齐的问题

Question

I have a page-wide wrapping div that has flexbox alignment to center:

.app_container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
}

In this wrapper, I have a menu that can vary in height as the user expands submenus. The problem is when the menu becomes vertically bigger than the window height. Some parts of the menu gets cut off at the top.

Image: https://imgur.com/a/x00tnoJ

One solution that I found was to simply get overflow: auto on the menu. But that causes the scroll bar to appear on the menu, not on the page wrapper. I want the scroll bar to be on the page wrapper.

Image: https://imgur.com/a/0eZM5Iq

Don't think it is relevant, but I use React.

Here is codepen: https://codepen.io/GuacomoleCyclone/pen/xxEoary

EDIT: I've stumbled upon a solution. I've added this and it solved all problems:

html, body{
display: grid;
}

Answer 1

If I understand correctly what your codepen is showing, the issue seems to be coming from setting the width and height on the html element. You want to change:

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

to

html, body { 
  padding: 0px;
  margin: 0px;
}
body {
    width: 100%;
    height: 100%;
}