In development, we often encounter a page header content fixed at the top, middle scrollable content requirements, general logic is to head content by position and z-index fixed position, improve the level, and then set the contents of the top middle distance at a distance such is the effect of the side scroll bar position from the top:
If we do not want to locate, and requires a scroll bar to scroll position from the beginning of the region, which is the flex came in handy in the following steps:
First, to contain the head. Parent element intermediate portion of the leg and so add style:
display: flex;
flex-direction: column;
Second, to scroll the contents of the parent element to add style:
flex: 1;
overflow: scroll;
final effect:
