title: Flexbox column-reverse in Firefox, Edge and IE
body: <p>I'm trying to make a responsive app; on larger screens, there's a list of divs and you can scroll <em>up</em> to see previous divs ("traditional" behavior). On smaller screens, it shows the same list but reverses the order, so scrolling <em>down</em> sees shows divs.</p>
  
  <p>I figured flexbox would be an awesome solution to this, and it was... on Chrome.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div id="list"&gt;
    &lt;div class="item"&gt;1&lt;/div&gt;
    &lt;div class="item"&gt;2&lt;/div&gt;
    &lt;div class="item"&gt;3&lt;/div&gt;
    &lt;div class="item"&gt;4&lt;/div&gt;
    &lt;div class="item"&gt;5&lt;/div&gt;
    &lt;div class="item"&gt;6&lt;/div&gt;
    &lt;div class="item"&gt;7&lt;/div&gt;
    &lt;div class="item"&gt;8&lt;/div&gt;
    &lt;div class="item"&gt;9&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And, the CSS:</p>
  
  <pre><code>#list {
    display: flex;
    flex-direction: column-reverse;
    height: 250px;
    overflow-y: scroll;
    border: 1px solid black;
  }
  
  .item {
    flex: 1;
    padding: 2em;
    border: 1px dashed green;
  }
  </code></pre>
  
  <p>As well as a fiddle to show it: <a href="http://jsfiddle.net/jbkmy4dc/3/">http://jsfiddle.net/jbkmy4dc/3/</a></p>
  
  <p>In Chrome, the <code>list</code> div properly shows a scroll bar. However, in Firefox and in IE/Edge, the scroll bar is visible but disabled.</p>
  
  <p>Any ideas? Am I missing a vendor prefix maybe?</p>