title: Flex cut off border when screen scroll
body: <p>Hi I have following HTML code (here is "working" <a href="https://jsfiddle.net/98orxaue/" rel="nofollow noreferrer">example</a>)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="layout"&gt;
      &lt;main class="main"&gt;
         &lt;nav class="menu"&gt;
              &lt;div&gt;&lt;div class="menu__item"&gt;Item&lt;/div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;div class="menu__item"&gt;Item&lt;/div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;div class="menu__item"&gt;Item&lt;/div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;div class="menu__item"&gt;Item&lt;/div&gt;&lt;/div&gt;
        &lt;/nav&gt;
  
        &lt;section class="main__content"&gt;
          Some Content
        &lt;/section&gt;
  
      &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And style:</p>
  
  <pre class="lang-css prettyprint-override"><code>.layout {
      height: 100vh;
      display: flex;
      flex-direction: column;
  }
  
  .main {
      display: flex;
  }
  
  .menu {
      display: flex;
      border-right: solid 3px red;
      width: 258px;
      flex-direction: column;
  }
  
  .menu__item {
      height: 340px;
      width: 240px;
      margin: 10px;
      background: #aaaaaa;
  }
  </code></pre>
  
  <p>The problem is that on Chrome, when screen height is smaller than left menu and scrollbar appear, then menu right border (red) will be not rendered when scrollbar is move down. Desired behaviour is to draw red border to the end of vertical menu (so if we move scrollbar we should always see red border). How to do it?</p>
  
  <p><a href="https://i.stack.imgur.com/515kN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/515kN.png" alt="enter image description here"></a></p>