title: Get flexbox to behave as a table
body: <p>I'm trying to make a table with <code>flexbox</code> but, I have some problems getting it to behave like a table. I can not get it to take only the space required, but still be aligned vertically. As you can see if you run the attached code all column's are taking up the same space. Any suggestions for how I can fix this?</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>.table {
      display: flex;
      flex-flow: column;
      border-top: 1px solid #000;
      border-left: 1px solid #000;
      max-width: 100%;
  }
  
  .table__row {
      display: flex;
      max-width: 100%;
      border-bottom:  1px solid #000;
  }
  .table__row:nth-of-type(even) {
      background-color: #fff;
  }
  
  .table__row:nth-of-type(odd) {
      background-color: #efefef;
  }
  
  .table__column {
      display: flex;
      text-align: left;
      flex-grow: 1;
      flex-basis: 0;
      padding: 0 1rem;
      border-right: 1px solid #000;
      word-break: break-word;
  }
  
  .table__header {
      background-color: blue;
      color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt;
      &lt;div class="table__row"&gt;
          &lt;div class="table__column table__header"&gt;
              ID
          &lt;/div&gt;
          &lt;div class="table__column table__header"&gt;
              TAG
          &lt;/div&gt;
          &lt;div class="table__column table__header"&gt;
              USED
          &lt;/div&gt;
          &lt;div class="table__column table__header"&gt;
              USER
          &lt;/div&gt;
          &lt;div class="table__column table__header"&gt;
              IP
          &lt;/div&gt;
          &lt;div class="table__column table__header"&gt;
              DATE
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="table__row"&gt;
          &lt;div class="table__column"&gt;
              1
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              newpage
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              1
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              05.02.2018
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="table__row"&gt;
          &lt;div class="table__column"&gt;
              2
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              news
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              1
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              05.02.2018
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="table__row"&gt;
          &lt;div class="table__column"&gt;
              3
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              rajohan
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              1
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              05.02.2018
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="table__row"&gt;
          &lt;div class="table__column"&gt;
              4
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              website
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              1
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              05.02.2018
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="table__row"&gt;
          &lt;div class="table__column"&gt;
              5
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              testtesttesttesttest test test
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              1
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              0
          &lt;/div&gt;
          &lt;div class="table__column"&gt;
              05.02.2018
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>