title: Flexbox - Two separate flex container columns: Items don't line up on the same row line
body: <p>I have a main flex container with two flex containers inside - one on the left and one on the right (both have 50% width ). They are set to <code>flex-flow:row wrap</code>.
  Both have their own flex items with varying height.</p>
  <p>I don't want the rows of the columns to be at independent positions, I want both columns to be aligned so that the row line is common for both of them.</p>
  <p>If the number of items are not as many as to become 3 rows or more, the design appears to work, but as soon as you have a third row, it becomes different, the rows are not common.</p>
  <p>See here, two rows of items:
  <a href="https://i.stack.imgur.com/LNb13.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LNb13.jpg" alt="enter image description here" /></a></p>
  <p>The position of the second row is the same for both columns, so the left one adapts to the right one, and that's the way I want it.</p>
  <p>But if I add some more items (making 3 rows), this happens:
  <a href="https://i.stack.imgur.com/Vco8D.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vco8D.jpg" alt="enter image description here" /></a></p>
  <p>Here is <a href="https://jsfiddle.net/galivan/pc78n5br/31/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  <p>HTML</p>
  <pre><code>&lt;div id=&quot;ctr&quot;&gt;
    &lt;div class=&quot;flexctr column1&quot;&gt;
       &lt;div class=&quot;flexitem&quot; style=&quot;height: 36px&quot;&gt;&lt;/div&gt;
         &lt;div class=&quot;flexitem&quot; style=&quot;height: 46px&quot;&gt;&lt;/div&gt;
           &lt;div class=&quot;flexitem&quot; style=&quot;height: 46px&quot;&gt;&lt;/div&gt;
           &lt;div class=&quot;flexitem&quot; style=&quot;height: 33px&quot;&gt;&lt;/div&gt;
           &lt;div class=&quot;flexitem&quot; style=&quot;height: 46px&quot;&gt;&lt;/div&gt;
           &lt;div class=&quot;flexitem&quot; style=&quot;height: 22px&quot;&gt;&lt;/div&gt;
           &lt;!-- if you  comment out the below three boxes, the items will line up on each row as we would like: --&gt;
          &lt;div class=&quot;flexitem&quot; style=&quot;height: 46px&quot;&gt;&lt;/div&gt;
           &lt;div class=&quot;flexitem&quot; style=&quot;height: 46px&quot;&gt;&lt;/div&gt;
           &lt;div class=&quot;flexitem&quot; style=&quot;height: 54px&quot;&gt;&lt;/div&gt;
           
    &lt;/div&gt;
     &lt;div class=&quot;flexctr column2&quot;&gt;
       
       &lt;div class=&quot;flexitem&quot; style=&quot;height: 62px&quot;&gt;&lt;/div&gt;
       &lt;div class=&quot;flexitem&quot; style=&quot;height: 71px&quot;&gt;&lt;/div&gt;
       &lt;div class=&quot;flexitem&quot; style=&quot;height: 49px&quot;&gt;&lt;/div&gt;
       &lt;div class=&quot;flexitem&quot; style=&quot;height: 71px&quot;&gt;&lt;/div&gt;
       &lt;div class=&quot;flexitem&quot; style=&quot;height: 71px&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flexitem&quot; style=&quot;height: 46px&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;flexitem&quot; style=&quot;height: 46px&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;flexitem&quot; style=&quot;height: 46px&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;other&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>*{
    box-sizing:border-box;
  }
  #ctr{
    display:flex;
    /* align-items:stretch; */
    flex-direction:row;
    border:2px solid orange;
  }
  .flexctr{
    display:flex; 
    flex-flow: row wrap;
     width: 33%;
     border:2px solid black;
  }
  
  .flexitem{
    width: 33%; 
    border: 1px solid yellow;
  }
  .column1 .flexitem{
     background:purple;
  }
  .column2 .flexitem{
     background:green;
  }
  #other{
     height:300px;
     background:lightblue;
  }
  </code></pre>
  <p>In my own project there is a different effect: if I set the top flex container to &quot;align-items:stretch&quot; (which is default), then there is a gap between the first and second row on the left column (about the height of one item). If I set it to &quot;align-items: baseline&quot;, then I get the same effect as in the jsfiddle example. (the jsfiddle example has the default &quot;stretch&quot; value).</p>
  <p>Is it possible to achieve the common row positions for the two columns?
  If not, is it possible with grid layout?</p>