title: Flexbox and fixed side navbar
body: <p>I'm learning css and html basics and got into trouble. My side flexbox (aside1) does not contain my side navbar (content). The navbar is covering the main flexbox (main). I turned over the web but did not find a solution which would work. </p>
  
  <p>Also my third flexbox (aside-2) takes automatic height but I want it to be, for example, 4em high. If I assign it, it works but then the main flexbox does not move up but just sticks as his previous postion.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/zuzfvufz/" rel="nofollow">http://jsfiddle.net/zuzfvufz/</a></p>
  
  <p>Thanks for the help. </p>
  
  <p>HTML:
      
      </p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Munchies&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="css/style3.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;nav&gt;
          &lt;ul class="navigation"&gt;
              &lt;li class="nav-item"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item"&gt;&lt;a href="world.html"&gt;Around the globe&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item"&gt;&lt;a href="where.html"&gt;Where to eat?&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item"&gt;&lt;a href="recipes.html"&gt;Recipes&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item"&gt;&lt;a href="about.html"&gt;About me&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;input type="checkbox" id="nav-trigger" class="nav-trigger" /&gt;
      &lt;label for="nav-trigger"&gt;&lt;/label&gt;
      &lt;div class="wrapper"&gt;
          &lt;article class="main"&gt;
              &lt;h1&gt;Food around the world&lt;/h1&gt;
              &lt;h2 id="japan" class="anchor"&gt;Japan&lt;/h2&gt;
              &lt;h3&gt;Ramen&lt;/h3&gt;
              &lt;p&gt;
                  Ramen, egg noodles in a salty broth, is Japan&amp;#39;s favourite late night meal. It&amp;#39;s also the perfect example of an imported dish &amp;#45; in this case from China &amp;#45; that the Japanese have made completely and deliciously their own. There are four major
                  soup styles: tonkotsu (pork bone), miso, soy sauce and salt. Fukuoka is particularly famous for its rich tonkotsu ramen; pungent miso ramen is a specialty of Hokkaido.
              &lt;/p&gt;
              &lt;img src="https://gourmetadventuresnet.files.wordpress.com/2014/02/chashu-shoyu-ramen-gourmet-adventures.jpg" alt="ramen" class="responsive-image" /&gt;
              &lt;h3&gt;Sushi&lt;/h3&gt;
              &lt;p&gt;
                  Put simply, sushi is raw fish served on rice seasoned lightly with vinegar. It&amp;#39;s in the variety of flavours and textures &amp;#45; like tangy, creamy uni (sea urchin meat) and plump, juicy, ama-ebi (sweet shrimp) &amp;#45; that things get interesting. Despite sushi&amp;#39;s
                  lofty image, it has a humble origin: street food.
              &lt;/p&gt;
              &lt;h3&gt;Tempura&lt;/h3&gt;
              &lt;p&gt;
                  Light and fluffy tempura is Japan&amp;#39;s contribution to the world of deep-fried foods (though it likely originated with Portuguese traders). The batter&amp;#45;coated seafood and vegetables are traditionally fried in sesame oil and served with either a tiny pool
                  of salt or a dish of soy sauce&amp;#45;flavoured broth spiked with grated radish for dipping. Do not miss out on ebi&amp;#45;ten (tempura prawns).
              &lt;/p&gt;
              &lt;h3&gt;Okonomiyaki&lt;/h3&gt;
              &lt;p&gt;
                  Literally &amp;#34;grilled as you like,&amp;#34; okonomiyaki is Japanese comfort food at its best, and a clear violation of the typical refined image of Japanese food. It&amp;#39;s a savoury pancake filled with any number of things (but usually cabbage and pork) and topped with
                  fish flakes, dried seaweed, mayonnaise and a Worcester&amp;#45;style sauce. It&amp;#39;s also a lot of fun: At most restaurants, diners grill the dish themselves at a hotplate built into the table.
              &lt;/p&gt;
          &lt;/article&gt;
          &lt;article class="main"&gt;
              &lt;h2 id="mexico"&gt;Mexico&lt;/h2&gt;
              &lt;h3&gt;Mole&lt;/h3&gt;
              &lt;p&gt;Three states claim to be the original home of mole (pronounced &amp;#34;mol&amp;#45;eh&amp;#34;), a rich sauce popular in Mexican cooking.
                  There are myriad types of mole but all contain around 20 or so ingredients, including one or more varieties of chilli peppers, and all require constant stirring over a long period of time.
                  Perhaps the best&amp;#45;known mole is mole poblano, a rusty red sauce typically served over turkey or chicken.
              &lt;/p&gt;
          &lt;/article&gt;
          &lt;aside class="aside aside-1"&gt;
              &lt;ul class="content"&gt;Table of content
                  &lt;li&gt;&lt;a href="#japan"&gt;Japan&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#mexico"&gt;Mexico&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;eeeeee&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;eeeeee&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;eeeeee&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;eeeeee&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/aside&gt;
          &lt;aside class="aside aside-2"&gt;
              MUNCHIES
          &lt;/aside&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/*CSS reset*/
  
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }
  
  
  /*Navigation menu*/
  
  .navigation {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
      list-style: none;
      background: rgb(35, 36, 35);
  }
  
  
  /*List items width in navigation menu*/
  
  .nav-item {
      width: 200px;
      border-top: 1px solid rgb(237, 237, 237);
      border-bottom: 1px solid rgb(237, 237, 237);
  }
  
  
  /*Appearance for navigation menu links*/
  
  .nav-item a {
      display: block;
      padding: 1em;
      background: rgb(35, 36, 35);
      color: white;
      font-size: 1.2em;
      text-decoration: none;
      transition: background 0.5s;
  }
  
  
  /*Changing the color of the link when hovering over with the cursor*/
  
  .nav-item a:hover {
      background: black;
  }
  
  
  /* Site wrapper, using flexbox*/
  
  .wrapper {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      text-align: center;
  }
  
  .wrapper {
      flex: 1 100%;
      min-height: 100%;
      min-width: 100%;
      background-color: rgb(237, 237, 237);
      position: relative;
      top: 0;
      bottom: 100%;
      left: 0;
      z-index: 1;
      padding: 0em;
      background-size: 200%;
  }
  
  .main {
      padding: 1em;
      flex: 1 100%;
      text-align: justify;
      background: rgb(237, 237, 237);
      order: 3;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 18px;
      line-height: 1.3;
  }
  
  .aside-1 {
      padding-top: 1em;
      padding-left: 5em;
      padding-right: 5em;
      padding-bottom: 1em;
      margin-top: 0em;
      flex: 1 100%;
      background: rgb(224, 224, 224);
      order: 2;
  }
  
  .aside-2 {
      padding: 10px;
      margin-top: 0em;
      flex: 1 100%;
      background: rgb(55, 60, 57);
      order: 1;
      font-size: 40px;
      color: white;
  }
  
  .responsive-image {
      max-width: 100%;
  }
  
  
  /*Navigation trigger*/
  
  .nav-trigger {
      /*hide the checkbox input*/
      position: absolute;
      clip: rect(0, 0, 0, 0);
  }
  
  label[for="nav-trigger"] {
      /*critical positioning styles */
      position: fixed;
      left: 15px;
      top: 15px;
      z-index: 2;
      /*styles */
      height: 30px;
      width: 30px;
      cursor: pointer;
      background-image: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'&gt;&lt;rect width='30' height='6'/&gt;&lt;rect y='24' width='30' height='6'/&gt;&lt;rect y='12' width='30' height='6'/&gt;&lt;/svg&gt;");
      background-size: contain;
  }
  
  .nav-trigger+label, .wrapper {
      transition: left 0.3s;
  }
  
  .nav-trigger:checked+label {
      left: 215px;
  }
  
  .nav-trigger:checked~.wrapper {
      left: 200px;
  }
  
  html, body {
      height: 100%;
  }
  
  body {
      /*Without this, the body has excess horizontal scroll when the menu is open*/
      overflow-x: hidden;
      margin-left: 0px;
      margin-right: 0px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
  }
  
  h1, h2, h3, p {
      margin-left: 1em;
      margin-right: 1em;
  }
  
  h1, h2, h3 {
      font-weight: bold;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  
  .recipe {
      margin-left: 1em;
      margin-right: 1em;
      margin-bottom: 1em;
  }
  
  
  /*Styles for table of content*/
  
  .content {
      list-style-type: none;
      text-align: center;
      font-size: 18px;
      max-width: 15em;
      margin: auto;
  }
  
  .content li a {
      display: block;
      padding: 0.7em;
      background: rgb(35, 36, 35);
      /*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
      color: white;
      font-size: 1em;
      text-decoration: none;
      transition: background 0.5s;
      /*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
      border-top: 1px solid white;
      border-bottom: 1px solid white;
  }
  
  .profile-pic {
      border-radius: 50%;
      max-width: 30%;
      max-height: 30%;
      float: left;
      margin: 1em 1em 1em 1em;
  }
  
  #social img {
      display: inline-block;
      height: 35px;
      width: 35px;
      margin: 1em 1em 1em 1em;
      float: left;
  }
  
  .anchor:before {
      content: "";
      display: block;
      height: 50px;
      /* fixed header height*/
      margin: -50px 0 0;
      /* negative fixed header height */
  }
  
  .index {
          max-width: 40%;
          border-radius: 25px;
          margin: auto;
          display: block;
  }
  
  
  /*Tablets responsive*/
  
  @media all and (min-width: 700px) {
      .main {
          padding: 10px;
          flex: 1 100%;
      }
      h1, h2, h3, p {
          margin-left: 5em;
          margin-right: 5em;
      }
      .recipe {
          margin-left: 5em;
          margin-right: 5em;
      }
      .aside-1 {
          padding: 10px;
          flex: 1 100%;
          font-size: 18px;
          /*position: fixed;*/
          height: 100%;
      }
      .aside-2 {
          background: red;
          margin-top: 1em;
      }
      /* Navigation Menu - Background */
      .navigation {
          /* critical sizing and position styles */
          height: 6em;
          z-index: 2;
          overflow: hidden;
          /* non-critical appearance styles */
          background: rgb(55, 60, 57);
      }
      /* Navigation Menu - List items */
      .nav-item {
          /* non-critical appearance styles */
          width: 20%;
          height: 6em;
          border-top: none;
          border-bottom: none;
          float: left;
      }
      .nav-item a {
          /* non-critical appearance styles */
          width: auto;
          height: 6em;
          background: rgb(55, 60, 57);
          font-size: 1em;
          transition: color 0.2s, background 0.5s;
          text-align: center;
          padding-top: 2.3em;
          border-left: 1px solid rgb(237, 237, 237);
          border-right: 1px solid rgb(237, 237, 237);
      }
      /* Nav Trigger */
      .nav-trigger {
          display: none;
      }
      label[for="nav-trigger"] {
          /* critical positioning styles */
          display: none;
      }
      .nav-trigger+label, .wrapper {
          transition: none;
      }
      .nav-trigger:checked+label {
          left: 0;
      }
      .nav-trigger:checked~.wrapper {
          left: 0px;
      }
      body {
          margin-top: 3em;
      }
      .responsive-image {
          margin: auto;
          padding: 20px;
          display: block;
          width: 40%;
      }
      /*Styles for table of content*/
      .content {
          list-style-type: none;
          text-align: center;
          font-size: 18px;
      }
      .content li a {
          display: block;
          padding: 0.7em;
          background: rgb(55, 60, 57);
          /*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
          color: white;
          font-size: 1em;
          text-decoration: none;
          transition: background 0.5s;
          /*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
          border-top: 1px solid rgb(237, 237, 237);
          border-bottom: 1px solid rgb(237, 237, 237);
      }
  }
  
  
  /*Desktop responsive*/
  
  @media all and (min-width: 900px) {
      .main {
          padding: 10px;
          flex: 1 80%;
      }
      h1, h2, h3, p {
          margin-left: 5em;
          margin-right: 5em;
      }
      .aside-1 {
          padding: 10px;
          font-size: 18px;
          flex: 1 0 20%;
          height: 100%;
      }
      .aside-2 {
          background: red;
          margin-top: 0;
      }
      /* Navigation Menu - Background */
      .navigation {
          /* critical sizing and position styles */
          height: 3em;
          z-index: 2;
          overflow: hidden;
          /* non-critical appearance styles */
          background: rgb(55, 60, 57);
      }
      /* Navigation Menu - List items */
      .nav-item {
          /* non-critical appearance styles */
          width: auto;
          height: 3em;
          border-top: none;
          border-bottom: none;
          float: left;
      }
      .nav-item a {
          /* non-critical appearance styles */
          width: auto;
          height: 3em;
          background: rgb(55, 60, 57);
          font-size: 1em;
          transition: color 0.2s, background 0.5s;
          padding: 1em;
      }
      /* Nav Trigger */
      .nav-trigger {
          display: none;
      }
      label[for="nav-trigger"] {
          /* critical positioning styles */
          display: none;
      }
      .nav-trigger+label, .wrapper {
          transition: none;
      }
      .nav-trigger:checked+label {
          left: 0;
      }
      .nav-trigger:checked~.wrapper {
          left: 0px;
      }
      body {
          margin-top: 3em;
      }
      .responsive-image {
          margin: auto;
          padding: 20px;
          display: block;
          width: 40%;
      }
      /*Styles for table of content*/
      .content {
          list-style-type: none;
          text-align: center;
          font-size: 18px;
          max-width: 10em;
          margin-top: 6em;
          position: fixed;
          left: 4em;
      }
      .content li a {
          display: block;
          padding: 0.7em;
          background: rgb(55, 60, 57);
          /*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
          color: white;
          font-size: 1em;
          text-decoration: none;
          transition: background 0.5s;
          /*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
          border-top: 1px solid rgb(237, 237, 237);
          border-bottom: 1px solid rgb(237, 237, 237);
      }
      .profile-pic {
          border-radius: 50%;
          max-width: 30%;
          max-height: 30%;
          float: left;
          margin: 1em 1em 1em 5em;
      }
      .index {
          max-width: 40%;
      }
  }
  </code></pre>
  
  <p>Thanks again!</p>