title: position: sticky, works in Chrome but not in Firefox
body: <p>I need to have a vertical parent-height div which contains smaller divs. In case there's extra space, all but the last divs should be placed on top, and the latest div should be placed at the bottom. I've implemented it with Bootstrap and flex.</p>
  
  <p>Now I thought that it would be nice if, when possible, the bottom div will be at the bottom of the viewport instead of at the bottom of the containing div. I've implemented it with <code>position: sticky</code>, and it works on Chrome but not in Firefox (both should support <code>position: sticky</code>).</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div id="container" class="d-flex flex-column"&gt;
      &lt;div class="flex-item"&gt;1&lt;/div&gt;
      &lt;div class="flex-item"&gt;2&lt;/div&gt;
      &lt;div class="d-flex flex-column last"&gt;
        &lt;div class="flex-item mt-auto last-inner"&gt;3&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      height: 1000px;
  }
  
  #container .last {
      flex: 1;
  }
  
  #container .last-inner {
      position: sticky;
      bottom: 0;
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/1p4gtruk/34/" rel="nofollow noreferrer">JSFiddle</a></strong></p>