title: CSS: Flex item not growing with content in chrome
body: <p>I have been facing this issue for hours and i haven't find a fix for it, not even with the answers found on other questions. It seems like the flex items are not well positioned in <code>google-chrome</code> as they are in <code>mozilla firefox</code>.</p>
  
  <p>I am making a list of tables to display as report of dates, each item contains a table that display the activities done in that particular date, and all of these items are displayed with <code>flex</code> in <code>column</code> direction to make put the title date above the table, also because the table must be in the center of the item.</p>
  
  <p>Everything works fine until the second item is put, the second item takes part of the space that the first item is taking and that's because the item is not getting the height it should, which should grow with the content.</p>
  
  <p>An example of the <code>HTML</code> structure goes like this:</p>
  
  <pre><code>&lt;div id="box-2"&gt;
      &lt;!-- repeat(Reports) --&gt;
      &lt;div class="box-item"&gt;
          &lt;h5&gt;{Reports[].date}&lt;/h5&gt;
  
          &lt;div class="box-table"&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                      &lt;!-- Headers --&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;!-- data --&gt;
                      &lt;/tr&gt;
                      ...
                      ...
                      ...
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and <code>CSS</code> goes like this:</p>
  
  <pre><code>#box-2{
      display: flex;
      flex-direction: column;
  }
  
  .box-item{
      display: flex;
      flex-direction: column;
  }
  .box-item &gt; .box-table{
      margin: 0 auto;
  }
  </code></pre>
  
  <p>Again, when the second item box is placed, it is displaying over the first item at some point and it happens to the rest of other items after the first, this doesn't happen in firefox but i still want to know how to fix this.</p>
  
  <p>I have created a plunk for this so i could show the code that resemblances more with the orignal <a href="https://plnkr.co/edit/s8wRmNepEH54bZtN9J5b?p=info" rel="nofollow noreferrer">here</a></p>