title: Anchor links (href) are not working when used in flex layout with flex-direction:row
body: <p>I have three pages horizontally, each page filling up the entire screen, with a fixed menu having the links that jumps to a specific page. However it is also possible to scroll to the right to get to each screen.</p>
  
  <p>If two pages are visible at the same time (Example: half of page-2 and half of page-3) the anchor links to those pages doesn't work, only the link to page-1 does work. After that all links start working again.</p>
  
  <p>This works perfectly in column mode. I assume this is because anchor links to the top of the section and in landscape mode I would want it to display it from the side?</p>
  
  <p>Below is my entire css</p>
  
  <pre><code>body{
      font-size:0px;
  }
  
  h1{
  
      font-family: 'Londrina Solid', cursive;
      font-size:120px;
      text-align: center;
      color:rgba(153,0,0,1);
      text-shadow: -1px -1px #A99E9E;
  }
  
  p{
  
      font-family: 'Titillium Web', sans-serif;
      font-size:25px;
      color:rgba(255,255,255,1);
      background-color:rgba(153,0,0,0.8);;
      text-shadow: 4px 4px 10px #000000;
  
  }
  
  .pad{
  
      margin-top:33vh;
      display:flex;
      flex-direction:column;
  
  }
  
  .line1{
  
      text-align:center;
      margin-right:32vw;
      margin-left:21vw;
      margin-top:2vh;
      padding-top:1vh;
      padding-bottom: 2vh;
  }
  
  .line2{
  
      text-align:center;
      margin-right:19vw;
      margin-left:33vw;
      margin-top:6vh;
      padding-top:2vh;
      padding-bottom: 2vh;
  }
  
  .menu{
  
      position:fixed;
      left:0;
      right:0;
      padding-left:33.33vw;
      padding-right:33.33vw;
      min-height:10vh;
      text-align:center;
      background-color:rgba(42, 37, 240, 0.7);
      display:flex;
      flex-direction:row;
      justify-content: space-around;
  }
  
  .menu a{
      font-family: 'Londrina Solid', cursive;
      text-decoration:none;
      font-size:25px;  
      color:rgba(255,255,255,0.9);
      font-weight:bold;
      padding-top:3vh;
      padding-bottom:3vh;
      padding-right:4vw;
      padding-left:4vw;
      text-shadow: 5px 5px 15px #000000;
  
  }
  
  .menu a:hover{
      background-color:rgba(4, 3, 70, 0.5);
  }
  
  section:nth-child(1){
  
      height:100vh;
      width:100vw;
      background-image: url("images/hot-cup.jpg");
      background-size:cover;
      background-position:center;
  
  }
  
  section:nth-child(2){
      height:2vh;
      width:100vw;
      background-color: darkred;
  }
  
  section:nth-child(3){
  
      height:100vh;
      width:100vw;
      background-image: url("images/orange-quarters.jpg");
      background-size:cover;
      background-position:center;
  }
  
  section:nth-child(4){
      height:2vh;
      width:100vw;
      background-color: darkred;
  }
  
  section:nth-child(5){
  
      height:100vh;
      width:100vw;
      background-image: url("images/cosy-cafe.jpg");
      background-size:cover;
      background-position:center;
  }
  
  article{
  
      display:flex;
      flex-direction: column;
  
  
  
  }
  
  
  
  
  @media screen and (orientation:landscape) and (max-width: 668px) and (max-height: 400px) {
  
      article{
          flex-direction:row;
          width:304vw;
      }
  
      h1{
          margin-left:10vw;
          font-size:80px;
      }
  
      section#border1{
          height:100vh;
          width:2vw;
      }
  
      section#border2{
          height:100vh;
          width:2vw;
      }
  
      .menu a{
          font-size:45px;
          padding-top:10vh;
          padding-bottom:10vh;
      }
  
      .pad{
          margin-top:7vh;
      }
  
      .line1{
          margin-right:24vw;
          margin-left:25vw;
          font-size:20px
      }
      .line2{
          margin-right:9vw;
          margin-left:39vw;
          font-size:20px
      }
  
      .menu{
          top:0;
          bottom:0;
          position:fixed;
          left:auto;
          right:auto;
  
          padding-left:0vw;
          padding-right:0vw;
  
          flex-direction:column;
          margin-right:30vw;
      }
  
  }
  
  @media(max-width:376px){
  
      article{
          flex-direction:column;
      }
  
      h1{
          font-size:55px;
      }
  
      p{
          font-size:14px;
      }
  
      .pad{
          margin-top:35vh;
      }
  
      .line1{
          font-size:18px;
          margin-left:15vw;
      }
      .line2{
          font-size:18px;
          margin-left:26vw;
          margin-right:9vw;
      }
  
      .menu a{ 
          font-size:25px;
          padding-bottom:2.3vh;
          padding-top:2vh;
          padding-right:0vw;
          padding-left:0vw;
      }
  
      section#border1{
          height:2vh;
          width:100vw;
      }
  
      section#border2{
          height:2vh;
          width:100vw;
      }
  
      .menu{
          top:auto;
          bottom:auto;
          position:fixed;
          left:0;
          right:0;
  
          padding-left:0vw;
          padding-right:0vw;
  
          flex-direction:column;
  
      }
  }
  </code></pre>