title: CSS3 inline flexbox with ul list?
body: <p>I'm trying to set up a left meny where the <code>li</code> elements stretch to the entire height of the screen whatever the size of the screen.</p>
  
  <p>I can't have the li elements filling the whole height of the screen with the css3 flex property. I've been looking at a good documentation here:</p>
  
  <p><a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">http://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></p>
  
  <p>I'm working with a <code>ul</code> list of elements. Don't know if this is causing the problem ..</p>
  
  <p>This is what I'm trying to do:</p>
  
  <pre><code>#left-drawer-menu {
      width: 100%;
      list-style-type: none;
      margin: 0px;
      padding: 0px;
  
      display: -webkit-flex;
      -webkit-flex-direction: column;
  
      display: flex;
      flex-direction: column;
  }
  
  #left-drawer-menu li{
      background-color: white;
      text-align: center;
      min-height: 100px;
      height: 20%;
  }
  
  
  
  &lt;ul id="left-drawer-menu"&gt;
      &lt;li data-icon="contacts"&gt;&lt;span class="km-icon km-mostrecent"&gt;&lt;/span&gt;Available 1&lt;/li&gt;
      &lt;li data-icon="globe"&gt;&lt;span class="km-icon km-mostviewed"&gt;&lt;/span&gt;Available 2&lt;/li&gt;
      &lt;li data-icon="camera"&gt;&lt;span class="km-icon km-organize"&gt;&lt;/span&gt;Available 3&lt;/li&gt;
      &lt;li data-icon="organize"&gt;&lt;span class="km-icon km-featured"&gt;&lt;/span&gt;Available 4&lt;/li&gt;
      &lt;li data-icon="settings"&gt;&lt;a href="#profile"&gt;&lt;span class="km-icon km-action"&gt;&lt;/span&gt;Available 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks for your help.</p>