CSS To Make Vertical Scrolling Region Under Fixed Header?

Question

Goal: Emulate the fixed header and scrollable content of this StackOverflow page:

• Footer under the content scrolls up as the content

Answer 1

Use overflow-x: auto for the content you want to scroll.

In this case the

block gets its own scrollbar. The content will not go behind the header element.

body {
  margin: 0;
  background-color: red;
  flex-direction: column;
  display: flex;
  height: 100vh;
}

header {
  opacity: .3;
  background-color: yellow;
  height: 50px;
}

main {
  overflow-x: auto;
  flex: 1;
}

  
Header is semi-opaque
  

    
Go to anchor Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    
Go to anchor Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et earebum.
    
ANCHOR  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    
 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.