scene description
For example, the structure in the picture below is implemented entirely using flex layout, that is, the green box on the right display: flex, the two black boxes with a fixed height, and the blue box flex: 1; overflow: auto;
Sometimes you will find that even if this is set, when the height of the content in the blue box is high, the scroll bar will not be displayed. Instead, the height of the blue box and the upper green box will be raised, and the scroll bar will be displayed on the page as a whole;
Causes and solutions of problems
The height of the outermost red box and the green box on the right is generally 0. height: 100%;The height: 100%most feared problem is the gap, that is, height: 100%the height of the parent element of the set element is unknown, so you can check whether there is a height gap.
//有时以下也是需要的
html, body {
height: 100%;
}
overflow: auto;There is also a situation where the upper element is not set overflow: auto;. For example, if the blue part in the picture above wants to exceed the scroll, both the blue box and the blue parent green box must be set.overflow: auto;