title: Vertical tabs with flex box
body: <p>I would like to accomplish a vertical tabs layout, so on the left would be the tabs and on the right the tab contents. The challenge is that I have to adhere to a specific markup which makes things complicated.</p>
  
  <p>Below is my last attempt, I cant make the tabs fill in the space left by the content:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  .tabs-container{
    display: flex;
    flex-direction: column;
    max-width: 400px;
  }
  
  .tab{
   width: 100px;
   background-color: gray;
  }
  
  .tab-content{
    display: none;
  }
  .tab-content.active{
    display: block;
    height: 100px;
    order: -1;
    align-self: flex-end;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class='tabs-container'&gt;
    &lt;li class='tab'&gt;tab one&lt;/li&gt;
    &lt;li class='tab-content active'&gt;contents tab one&lt;/li&gt;
    &lt;li class='tab'&gt;tab two&lt;/li&gt;
    &lt;li class='tab-content '&gt;contents tab two&lt;/li&gt;
    &lt;li class='tab'&gt;tab three&lt;/li&gt;
    &lt;li class='tab-content'&gt;contents tab three&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a solution for this problem using css flex box?</p>
  
  <p>Thanks</p>