title: How to create a horizontally scrollable flex column of reversed flex rows?
body: <p>I want to create a horizontally scrollable flex column which holds several flex rows, however each row I want to display in a reversed fashion. i.e. 1,2,3,4,5,6 displays as 6,5,4,3,2,1.</p>
  
  <p>Here is a JSFiddle of my attempt:</p>
  
  <p><a href="https://jsfiddle.net/6kjgdtas/" rel="nofollow noreferrer">https://jsfiddle.net/6kjgdtas/</a></p>
  
  <p>As you can see the horizontal scrollbar disappears.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="column"&gt;
    &lt;div class="row"&gt;
      &lt;div class="box"&gt;1&lt;/div&gt;
      &lt;div class="box"&gt;2&lt;/div&gt;
      &lt;div class="box"&gt;3&lt;/div&gt;
      &lt;div class="box"&gt;4&lt;/div&gt;
      &lt;div class="box"&gt;5&lt;/div&gt;
      &lt;div class="box"&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="box"&gt;1&lt;/div&gt;
      &lt;div class="box"&gt;2&lt;/div&gt;
      &lt;div class="box"&gt;3&lt;/div&gt;
      &lt;div class="box"&gt;4&lt;/div&gt;
      &lt;div class="box"&gt;5&lt;/div&gt;
      &lt;div class="box"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.column {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  
  .row {
    display: flex;
    flex-direction: row-reverse;
  }
  
  .box {
    display: flex;
    width: 200px;
    height: 40px;
    margin: 2px;
    background: red;
    flex-shrink: 0;
  }
  </code></pre>
  
  <p>I expect a horizontally scrollable column of two rows, displaying 6,5,4,3,2,1 (i.e. reverse order), where each div is display: flex</p>