title: How to stop web page header scrolling off screen when a nav link is selected
body: <p>I'm having some problems with the following CSS/HTML. This is on a Mac but occurs both with Safari and Chrome, so it seems to be my CSS.</p>
  <p>I'm trying to get a simple web page to display basic documentation for a personal project. I have a &quot;fixed&quot; header, then a navigation section and a main section underneath.</p>
  <p>The general setup works fine: I can click links in the navigation bar and the main section scrolls to that link.</p>
  <p>The problem is that if the main content is too long (i.e. longer than the current viewport) then when the main section scrolls to that location the header scrolls <em>off</em> the top of the screen and I can't get it back without resizing the browser window.</p>
  <p>I'm assuming that it's CSS related, probably something to with <code>flexbox</code> but I don't know enough CSS to be able to frame the question properly for a search here. So apologies if this has been asked before or is a well understood technique.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
      --nav-width: 24rem;
      --nav-padding: 1rem;
  
      --article-width: 72rem;
      --article-padding: 1rem;
  
      --main-padding: 2rem;
      --main-width: calc(var(--nav-width) + var(--article-width));
  
      --header-width: var(--main-width);
      --header-padding: 1rem;
  
      --body-padding: 10rem;
      --body-width: calc(var(--main-width) + 2 * var(--body-padding));
  }
  
  html {
      box-sizing: border-box;
      font-size: 62.5%;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      height: 100%;
  }
  
  body {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      height: 100%;
      margin: 0 auto;
      font-family: serif;
      font-size: 1.6rem;
      overflow: hidden;
  }
  
  header {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: var(--header-width);
      margin: 0 auto;
      padding-top: var(--header-padding);
      padding-bottom: var(--header-padding);
      border-bottom: 1px solid black;
  }
  
  main {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      height: 100%;
      margin: 0 auto;
      padding-top: var(--main-padding);
      padding-bottom: var(--main-padding);
  }
  
  nav {
      box-sizing: border-box;
      flex: 0 1 auto;
      width: var(--nav-width);
      height: calc(100% - 2 * var(--nav-padding));
      padding-top: 2rem;
      margin: 0;
      padding: var(--nav-padding);
      overflow-y: auto;
      counter-reset: nav-annex;
  }
  
  article {
      box-sizing: border-box;
      flex: 1;
      flex-direction: row;
      max-width: var(--article-width);
      width: var(--article-width);
      height: calc(100% - 2 * var(--article-padding));
      padding: var(--article-padding);
      padding-top: 0;
      padding-right: calc(2 * var(--article-padding));
      margin: 0;
      overflow-y: auto;
  }
  
  footer {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-top: 1px solid;
      margin-top: 2rem;
  }
  
  footer p {
      font-size: 1rem;
  }
  
  
  p {
      margin: 1.5rem 0;
      text-align: justify;
  }
  
  img {
      max-width: 100%;
  }
  
  h1, h2, h3, h4, h5, h6 {
      color: #111;
      line-height: 125%;
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
      font-weight: normal;
  }
  
  h1 {
      font-size: 4rem;
      margin-top: 0;
      font-weight: bolder;
      font-variant: small-caps;
  }
  
  h2 {
      font-size: 3.25rem;
      margin-top: 3rem;
  }
  
  h3 {
      font-size: 2.5rem;
      margin-top: 2rem;
  }
  
  nav ul, nav li {
      list-style-type: none;
      padding: 0 0 0 0.5rem;
  }
  
  nav &gt; ul:first-of-type &gt; li &gt; a {
      font-variant: small-caps;
      font-size: 1.5rem;
  }
  
  nav &gt; ul &gt; li &gt; a {
      font-weight: bold;
  }
  
  nav ul ul {
      padding: 0 0 0 1rem;
      margin: 0 inherit;
  }
  
  nav a {
      font-size: 1.33rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="generator" content="pandoc"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"&gt;
    &lt;meta name="author" content="phil"&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;style type="text/css"&gt;code{white-space: pre;}&lt;/style&gt;
    &lt;link rel="stylesheet" href="./test.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
    
    &lt;div&gt;Header&lt;/div&gt;
    &lt;div&gt;
  header things
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;main&gt;
    &lt;nav id="TOC"&gt;
    &lt;ul&gt;
  &lt;li&gt;&lt;a href="#TITLE"&gt;page title&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#overview"&gt;Overview&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#section-1"&gt;section 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#section-2"&gt;section 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
      
  &lt;/nav&gt;
  &lt;article&gt;
  &lt;h1 id="TITLE"&gt;Page Title&lt;/h1&gt;
  &lt;h2 id="overview"&gt;Overview&lt;/h2&gt;
  &lt;h3 id="section-1"&gt;section 1&lt;/h3&gt;
  &lt;p&gt;Fugiat nisi cupidatat do deserunt voluptate amet ipsum ea exercitation nisi excepteur. Officia laborum culpa duis labore cillum id tempor duis enim. Deserunt sint deserunt ex anim nostrud laborum ad ea. Elit dolore velit deserunt adipisicing esse eu. Et veniam minim aliquip ipsum officia tempor fugiat elit laborum sunt consectetur.&lt;/p&gt;
  
  &lt;h3 id="section-2"&gt;section 2&lt;/h3&gt;
  &lt;p&gt;Et magna nulla deserunt excepteur aliquip tempor non exercitation commodo. Excepteur pariatur nostrud ea aliqua dolore. Irure culpa quis sit Lorem reprehenderit ad consectetur adipisicing Lorem laboris. Do culpa aliquip veniam ea deserunt reprehenderit cupidatat consequat officia.&lt;/p&gt;
  
  &lt;footer&gt;
  &lt;p&gt;footer stuff
  &lt;p&gt;
  &lt;p&gt;&lt;span&gt;Modified: 2020-05-05 by phil&lt;/span&gt;&lt;/p&gt;
  &lt;/footer&gt;
  &lt;/article&gt;
  &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help would be appreciated!</p>
  <p>Thanks</p>