title: overflow scroll-y not working with flexbox
body: <p>I'm trying to "stack" divs on top of each other as new div boxes (<code>.dialog-box</code>) are added to the parent container (<code>.dialog-container</code>).</p>
  
  <p>To stack the elements, I'm using the following on the parent:</p>
  
  <pre><code>display: flex;
  flex-direction: column;
  justify-content: flex-end;
  </code></pre>
  
  <p>I'd like to scroll that container for <code>.dialog-box</code>s that are overflowing, yet with flex-box the <code>overflow-y: scroll;</code> is not scrolling.</p>
  
  <p>Two boxes: (fill up container from bottom to top as expected):</p>
  
  <p><a href="https://i.stack.imgur.com/7Yljom.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Yljom.png" alt="enter image description here"></a></p>
  
  <p>Six boxes (expands outside the height of the container and should scroll):</p>
  
  <p><a href="https://i.stack.imgur.com/A4cJAm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A4cJAm.png" alt="enter image description here"></a></p>
  
  <p>SCSS:</p>
  
  <pre><code>.dialog-container {
      border: 4px solid rgba(255, 255, 255, .4);
      border-radius: 5px;
      width: 300px;
      height: 340px;
      position: relative;
      top: -50px;
      margin: 0 auto;
      overflow-y: scroll;
      z-index: 5;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
  
      .dialog-box {
          width: 90%;
          background: $dialogBoxWhite;
          margin-bottom: 20px;
          border-radius: 8px;
          border: 5px solid $dialogBoxGreenBorder;
          color: $dialogBoxGreenFont;
          text-align: center;
          margin-left: 5px;
          padding: 5px;
          display: inline-block;
          p {}
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="dialog-container"&gt;
     &lt;div class="dialog-box"&gt;&lt;/div&gt;
     &lt;div class="dialog-box"&gt;&lt;/div&gt;
     &lt;div class="dialog-box"&gt;&lt;/div&gt;
     &lt;div class="dialog-box"&gt;&lt;/div&gt;
     &lt;div class="dialog-box"&gt;&lt;/div&gt;
     &lt;div class="dialog-box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>