title: CSS Flexbox position:absolute Container doesn't show all Elements
body: <p><strong>Hey everyone</strong></p>
  
  <p>my first Question on SO, so please be kind :)</p>
  
  <p>I experience a Problem with a flexbox container and its children when overflow-y is needed. So if you change the width of the container that it's needed to scroll vertically, not all elements are visible anymore, you just can't scroll up enough.</p>
  
  <p>Here is the codePen: <a href="http://codepen.io/anon/pen/XmWXeN" rel="nofollow">Codepen</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="dailyplan-header"&gt;
    &lt;button type="buttton"&gt;someButton&lt;/button&gt;
    &lt;button type="buttton"&gt;someButton2&lt;/button&gt;
    &lt;button type="buttton"&gt;someButton3&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="dailyplan-container"&gt;
    &lt;div class="dailyplan"&gt;Parent Name0
      &lt;div&gt;Some Element0&lt;/div&gt;
      &lt;div&gt;Some Element1&lt;/div&gt;
      &lt;div&gt;Some Element2&lt;/div&gt;
      &lt;div&gt;Some Element3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dailyplan"&gt;Parent Name1
      &lt;div&gt;Some Element0&lt;/div&gt;
      &lt;div&gt;Some Element1&lt;/div&gt;
      &lt;div&gt;Some Element2&lt;/div&gt;
      &lt;div&gt;Some Element3&lt;/div&gt;
      &lt;div&gt;Some Element4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dailyplan"&gt;Parent Name2
      &lt;div&gt;Some Element0&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dailyplan"&gt;Parent Name3
      &lt;div&gt;Some Element0&lt;/div&gt;
      &lt;div&gt;Some Element1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dailyplan"&gt;Parent Name4
      &lt;div&gt;Some Element0&lt;/div&gt;
      &lt;div&gt;Some Element1&lt;/div&gt;
      &lt;div&gt;Some Element2&lt;/div&gt;
      &lt;div&gt;Some Element3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dailyplan"&gt;Parent Name5
      &lt;div&gt;Some Element0&lt;/div&gt;
      &lt;div&gt;Some Element1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dailyplan"&gt;Parent Name6
      &lt;div&gt;Some Element0&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dailyplan"&gt;Parent Name7
      &lt;div&gt;Some Element0&lt;/div&gt;
      &lt;div&gt;Some Element1&lt;/div&gt;
      &lt;div&gt;Some Element2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body {
    background-color:#fff;
  }
  
  #dailyplan-header {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:50px;
    box-sizing: border-box;
    border-bottom: 2px solid #f0ad4e;
  }
  
  #dailyplan-container {
    position:absolute;
    box-sizing: border-box;
    top:50px;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
    align-content: center;
    overflow-y: scroll;
  }
  .dailyplan {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: green;
    min-width:250px;
    padding:20px;
    margin:10px;
    border-radius: 7px 20px 7px 20px;
    -moz-border-radius: 7px 20px 7px 20px;
    -webkit-border-radius: 7px 20px 7px 20px;
    border: 0px solid #000000;
  }
  </code></pre>
  
  <p>You can see there, when shrinking the Viewport to a small Width (smartphone) not all children elements are visible anymore. In particular you cannot scroll "up" until the first child is displayed.</p>
  
  <p>Of course I tried to search for a Solution but either I don't have the right search terms or there just isn't a matching Answer. Any hints to improve this description, that others could find it better, are of course appreciated.</p>