FlexBox mit statischen und rollbaren Elemente

Question

Ich habe folgendes Markup:

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
</div> 

Styling:

#container { 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
} 

Ich möchte folgendes haben:

1. header festen Stellen, das heißt nicht scrollen
2. Haben content direkt unter header, das heißt, wenn die Höhe des header ändert, sollte es zwischen den Elementen
3. Haben content scroll vertikal
4. Als Randbemerkung keine Überlappung: Sowohl header und content sind flex Behälter
5. Die header eine Nummer von <a> Elemente mit href Verknüpfung zu den Elementen auf content, die auf das ausgewählte Element auf Klick scrollen verwendet wird

Answer 1

I fixed haben dies mit:

#container { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 
#header { 
    display: flex; 
    flex: 1 0 auto; 
    justify-content: space-between; 
    flex-wrap: wrap; 
} 
#content { 
    display: flex; 
    flex-wrap: wrap; 
    flex: 1 1 auto; 
    overflow-y: auto; 
}