title: Element is outside container
body: <p>Why is the element outside it's container? At the bottom the yellow element is out of view by about .5px and the container with orange border is too. The scrollbar is overlapping the container too. I thought border-box was meant to make sure inner elements don't go out of the containing element.</p>
  
  <pre><code>.inner-element {
      height: 3000px;
      width: 20px;
      background: lightgoldenrodyellow;
      border: solid 2px black;
      box-sizing: border-box;
  }
  </code></pre>
  
  <p>Container element</p>
  
  <pre><code>.container {
      display: flex;
      width: 400px;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid orange;
      overflow-y: auto;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dEIOo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dEIOo.png" alt="enter image description here"></a></p>
  
  <p>The left sidebar on this Stackblitz:</p>
  
  <p><a href="https://stackblitz.com/edit/2-column-scroll-v2?file=src%2Fapp%2Fmy-view%2Fmy-view.component.css" rel="nofollow noreferrer">https://stackblitz.com/edit/2-column-scroll-v2?file=src%2Fapp%2Fmy-view%2Fmy-view.component.css</a></p>