title: inline-flex container with column-reverse impacting alignment of sibling inline-flex containers
body: <p>In my code, two inline flex divs sit next to each other.</p>
  
  <p>In the first inline flex div, flex items were set to <code>flex-direction:column-reverse</code>. However, this affects its sibling inline flex div's position horizontally. By that I mean, the sibling flex positioned differently when the flex was set to <code>flex-direction: column</code>. I don't understand why this behaves like this.</p>
  
  <p>My understanding is that <code>flex-direction</code> only controls the position of its children, i.e. flex items, and it has no effect on its sibling flex divs. But obviously this seems to be wrong. Can anyone explains why? Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex {
    display: inline-flex;
    border: solid;
    margin: 10px;
  }
  .box {
    background: papayaWhip;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 10px;
  }
  .column-reverse {
    flex-direction: column-reverse;
  }
  .column {
    flex-direction: column;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex column-reverse"&gt;
    &lt;div class="box"&gt;item1&lt;/div&gt;
    &lt;div class="box"&gt;item2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='flex'&gt;
    &lt;div class="box"&gt;item1&lt;/div&gt;
    &lt;div class="box"&gt;item2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flex column"&gt;
    &lt;div class="box"&gt;item1&lt;/div&gt;
    &lt;div class="box"&gt;item2&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>