title: Setting parent overflow without breaking position sticky of child
body: <p>I'm using <a href="https://github.com/wilddeer/stickyfill" rel="noreferrer">stickyfill</a> to stickify one of my columns in a two column design. I need my parent to fill vertically without declaring a height. <strong>stickyfill</strong> detects browsers (firefox, safari) that support <em>position:sticky;</em> and lets those browsers take over.</p>
  
  <p>I'm used to simply setting the parent's overflow to hidden but in this case, it breaks <em>position:sticky;</em> from working.</p>
  
  <p>My solution is to set the parent's <em>display</em> property to <em>table</em>. This works from what I've tested, but I'm wondering if this is a bad idea or if there's a <strong>better</strong> way to achieve my goal.</p>
  
  <p><strong>Example:</strong> <a href="https://jsfiddle.net/jszoukxr/1/" rel="noreferrer">JSFiddle</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
      overflow: visible;
      display: table;
      width: 400px;
  }
  
  .left {
      float: left;
      width: 60%;
      height: 1280px;
      background-color: #EEE;
  }
  
  .right {
      overflow: hidden;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="left"&gt;Content&lt;/div&gt;
      &lt;div class="right"&gt;Sticky&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>