title: Sticky position not working in float-based layout, but works outside float-based layout
body: <p>I'm wondering if anyone has any ideas why I'm having problems with position:sticky inside a float-based layout, but not outside of it.</p>
  
  <p>You can see a fiddle at: <a href="https://jsfiddle.net/pjt0kmd7/1/" rel="nofollow noreferrer">https://jsfiddle.net/pjt0kmd7/1/</a></p>
  
  <p>I'm using the following css for the sticky position:</p>
  
  <pre><code>.sticky {
      min-width: 200px;
      height: 300px;
      background-color: red;
      color: #fff;
      position: sticky;
      top: 1em;
      z-index: 10000;
  }
  </code></pre>
  
  <p>I've also tried removing overflow and heights on the first sticky's parents via:</p>
  
  <pre><code>overflow:none;
  height:auto;
  </code></pre>
  
  <p>But that has not made any difference.  Anyone know why the first red box isn't sticky like the second?</p>
  
  <p><strong>Edit</strong> Looks like I figured it out, the sticky parent needs a height defined? <a href="https://jsfiddle.net/pjt0kmd7/4/" rel="nofollow noreferrer">https://jsfiddle.net/pjt0kmd7/4/</a></p>