Fixed header and sidebar using flexbox without manually setting offset margin

Question

How can I lay out a page with a header and sider using flexbox, and make them both fixed without needing to apply a static margin on my main content to prevent it being covered?

I'm looking at https://keep.google.com/ and they laid everything out using flexbox, but still have a fixed header and sider when scrolling through the content div and inspecting it shows no offsets, just plain flexbox.

I've been unable to reproduce this... I have this codepen of a flexbox layout but can't get the header and sider to stay fixed without the top of <div class="content"> getting covered up.

Answer 1

Size your body element to the size of the viewport and make sure your flex items are scroll containers that don’t overflow body.

You should be able to achieve this layout with plain flexbox.

We’ll have two flex containers:

• one that vertically lays out our header and the sidebar+content
• on that horizontally lays out our sidebar and content

You can ensure that the body element takes up the height of the viewport with height: 100vh.

Flex items want to maintain their minimum content size by default (min-height: auto). But because we want the content to scroll inside them, we want the flex items themselves to always fill whatever space is available in their flex container instead. We can reset this automatic behavior with min-height: 0.

Then, we turn our sidebar and content areas into scroll containers with overflow-y: auto.

Here’s a working example:

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

header {
  background-color: whitesmoke;
  padding: 0 24px;
}

section {
  display: flex;
  flex: auto;
  min-height: 0;
}

nav,
main {
  overflow-y: auto;
}

nav {
  min-width: max-content;
}

ul {
  padding: 16px;
  list-style-type: none;
}

<header><h1>Header</h1></header>
<section>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Clients</li>
      <li>Contact us</li>
    </ul>
  </nav>
  <main>
    <p>
      Spicy jalapeno andouille salami tenderloin capicola meatball pig ham
      chuck doner cupim. Cupim capicola brisket landjaeger, ground round
      pork loin leberkas tail porchetta salami bacon beef ribs turkey pig
      short loin. Bresaola landjaeger biltong, pork belly andouille
      porchetta shoulder sausage cow bacon short loin doner pancetta tongue
      jerky. Flank chislic short loin strip steak fatback.
    </p>

    <p>
      Tongue pastrami biltong pork. T-bone ham hock kielbasa beef ribs
      salami. Ham turkey meatloaf strip steak kielbasa corned beef meatball
      tail beef salami alcatra filet mignon shankle cow. Rump ball tip
      venison, picanha frankfurter t-bone beef ribs spare ribs landjaeger
      beef ham hock. Short loin pork belly shankle turducken kevin pork loin
      tenderloin buffalo biltong shank alcatra. Kevin chuck swine meatball
      pork chop shoulder capicola spare ribs tri-tip.
    </p>

    <p>
      Bacon sirloin pastrami alcatra. Bacon flank shankle bresaola pig. Ham
      hock bresaola tenderloin swine shankle chuck jowl landjaeger porchetta
      beef ribs chicken short loin tri-tip turkey. Picanha ball tip short
      ribs ribeye sirloin drumstick prosciutto doner. Andouille alcatra
      shoulder, filet mignon pig chislic jerky kevin swine shank picanha
      prosciutto tenderloin pork chop. Pancetta shoulder landjaeger, flank
      capicola boudin ball tip leberkas swine venison tri-tip pork chop
      kevin.
    </p>

    <p>
      Doner pork kevin fatback sausage picanha filet mignon leberkas ham
      chislic short loin tongue andouille drumstick spare ribs. Turkey chuck
      filet mignon, chicken strip steak ground round buffalo bresaola. Short
      loin corned beef andouille, landjaeger t-bone strip steak tri-tip
      meatball. Hamburger alcatra bresaola ball tip, pork loin ground round
      short ribs. Landjaeger boudin alcatra andouille.
    </p>

    <p>
      Ribeye pork chop picanha biltong, rump pork belly chislic flank
      sirloin ham hock fatback buffalo chuck bresaola porchetta. Boudin ham
      cupim, beef ribs corned beef doner brisket landjaeger fatback t-bone.
      Tri-tip beef ribs chislic turducken short loin bacon. Cow landjaeger
      prosciutto jowl, fatback shank beef brisket tri-tip sausage short ribs
      strip steak meatball hamburger sirloin. Chuck corned beef cupim cow
      pork picanha, drumstick salami chislic brisket pancetta tail swine.
      Meatloaf kielbasa fatback t-bone hamburger jowl porchetta turducken
      rump ham cow salami. Pork belly pig boudin landjaeger beef shoulder.
    </p>
  </main>
</section>

Answer 2

I'd said one option would be to set the height of the header and calculate from that the height of the sidebar as well as the height of main part (see the example below).

If I may add, no offence to "keep.google", but I think grid would have been a better pick for this layout.

* {
  margin: 0;
  padding: 0;
}

html {
  --header-height: 80px;
  --main-height: calc(100vh - var(--header-height));
}

body {
  display: flex;
  flex-wrap: wrap;
}

header {
  background-color: green;
  height: var(--header-height);
  flex-grow: 1;
  width: 100%;
}

aside {
  background-color: blue;
  width: 200px;
  height: var(--main-height);
}

main {
  height: var(--main-height);
  overflow: auto;
  box-sizing: border-box;
  padding: 2em;
  flex: 1 0;
}

div {
  margin-bottom: 1em;
}

<header></header>
<aside></aside>
<main>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque non nisi reiciendis quos modi cupiditate id laboriosam alias iusto! Rerum totam accusantium ratione iusto nostrum alias atque, repellat repudiandae rem!</div>
  <div>Nostrum rerum quia quas, corporis alias voluptatibus aspernatur, similique nobis culpa ex, laborum facilis esse optio. Consectetur praesentium expedita ducimus quae molestiae quod quisquam quo, ea vel quibusdam odio. Labore.</div>
  <div>Facilis iste quibusdam, culpa ipsum impedit! Quidem consequuntur maiores quo illum enim dicta soluta molestias adipisci provident. Consectetur magni, similique porro at, deserunt cupiditate? Vero dolores iste id magni, illum!</div>
  <div>Quae impedit optio hic est vel mollitia libero, repellat doloremque similique. Similique porro officiis reiciendis at magnam, aliquid tenetur, amet harum doloremque rerum? Hic voluptas tempora atque quam obcaecati dignissimos!</div>
  <div>Soluta earum, assumenda quod laudantium ipsum totam fugiat distinctio? Obcaecati optio aut odio temporibus corporis voluptatem ullam non, earum consectetur aperiam illo, laudantium, reiciendis soluta. Doloribus dolorem, quas praesentium labore!</div>
  <div>Dolor, temporibus. Ratione accusantium cumque perferendis esse laborum est nesciunt, qui tempora cum, natus tenetur pariatur doloribus vero aperiam unde debitis dolor, exercitationem, minima corporis quae magni dignissimos reprehenderit. Perferendis!</div>
  <div>Veniam quia culpa ipsum consequatur unde nostrum nihil dicta placeat itaque obcaecati. Quia temporibus totam omnis! Quas reprehenderit, consectetur ducimus optio porro, quisquam distinctio, tempore culpa numquam nam repellat voluptatum.</div>
  <div>Quae beatae ipsam fuga magni similique facilis, reprehenderit dolores, hic eveniet totam quas recusandae mollitia consectetur inventore iste pariatur. Facere iusto, praesentium dicta aspernatur recusandae earum quisquam, at explicabo laboriosam.</div>
  <div>Eveniet repellendus, facilis, culpa nemo cupiditate provident modi ratione doloremque cum quisquam aliquam quis praesentium ad non reiciendis quod necessitatibus nobis, dolorem tempora ex. Similique, quis laborum sapiente accusamus quidem!</div>
  <div>Possimus ratione ex quos error excepturi dolores alias voluptates, voluptas dignissimos dicta, libero placeat, ad inventore harum ipsum ipsa, eveniet quo ullam impedit adipisci. A qui ratione, eligendi accusamus ad.</div>
  <div>Dolorem et natus magni, neque eum pariatur quis doloribus cum porro hic blanditiis! Iste ipsa sapiente, et nesciunt vero, non inventore recusandae sunt quam, eligendi nulla voluptas? Eum, possimus obcaecati!</div>
  <div>Esse, quas eligendi exercitationem magnam quam ut odit eius numquam, quibusdam voluptatum dolore deserunt maiores et deleniti nihil suscipit est inventore voluptates fugit. Dolor blanditiis adipisci obcaecati quae, eius commodi!</div>
  <div>Asperiores soluta amet officia. Dicta ipsa quia nesciunt blanditiis, ex culpa, repellendus praesentium cum repellat, officia natus debitis voluptatibus delectus! A amet aliquam asperiores minima distinctio adipisci illo modi saepe?</div>
  <div>Eum error tempore temporibus, doloribus incidunt, laudantium tenetur facilis. Quia aperiam aspernatur, obcaecati cumque excepturi nostrum sint earum quidem, dolor laboriosam blanditiis dignissimos delectus numquam, consectetur eaque praesentium quaerat!
    Facere.</div>
  <div>Dicta, eos, doloribus. Ad voluptates, maxime esse odit voluptate corrupti ducimus veritatis deleniti beatae quasi quam asperiores aspernatur neque aut debitis nesciunt quis est, sequi veniam! Ipsum aperiam, mollitia cum.</div>
  <div>Alias labore, quod consectetur error earum at aliquam veniam quidem animi sint fugiat est, recusandae adipisci perferendis fugit officia. Quasi quaerat numquam quod iusto exercitationem culpa repellendus, ab aspernatur! Esse.</div>
  <div>Porro, voluptates saepe ipsa deleniti perspiciatis dignissimos cumque? Optio culpa tenetur ullam neque a fugiat, tempora velit, sed ipsa maxime ut commodi quaerat. Quas error incidunt eaque sit distinctio iure!</div>
  <div>Asperiores quaerat consequuntur distinctio nostrum alias fuga quasi nemo similique sint animi, inventore officia. Asperiores et labore quibusdam, recusandae a maxime, minima omnis error ab tenetur quia est fugit, delectus?</div>
  <div>Rerum, reprehenderit, itaque. A, dolorum esse veritatis quas dicta enim soluta, qui sunt eos deserunt debitis cumque impedit quibusdam repudiandae laboriosam dolore. Laudantium quia quo reiciendis eos voluptatum omnis illum.</div>
  <div>Facere, nesciunt? Tempore, obcaecati, ullam adipisci excepturi placeat sed perferendis odit quibusdam ab quo dicta quasi laudantium nobis fugit, officiis, itaque dolores ex exercitationem? Modi consequatur consectetur pariatur at sint.</div>
</main>