title: Safari position:sticky not working in an overflow:auto element
body: <p>According to <a href="https://caniuse.com/#search=sticky" rel="noreferrer">CanIUse</a>, there is a known issue with Safari and <code>position:sticky</code> inside an <code>overflow:auto</code> element:</p>
  
  <blockquote>
    <p>A parent with overflow set to auto will prevent position: sticky from working in Safari</p>
  </blockquote>
  
  <p>However, this is the exact use case that I need. I have a scrollable div, which is subdivided into two columns. The right column should be sticky and never move, even when the entire div is scrolled. The reason I'm using <code>position:sticky</code> on the right column is that I want the user to be able to still scroll the left column with the cursor on the right column. And this was the only solution that I found to have worked.</p>
  
  <p>A working example for Firefox / Chrome is here:
  <a href="http://cssdeck.com/labs/zfiuz4pc" rel="noreferrer">http://cssdeck.com/labs/zfiuz4pc</a>
  The orange area remains fixed while scrolling, but in Safari it doesn't.</p>
  
  <p>The example above has some unnecessary wrappers to my issue, but I wanted to replicate as closely as possible the environment where I want to have this code working in. The basic gist of it is I have this:</p>
  
  <pre><code>&lt;div class="modal-content"&gt;
    &lt;div class="left-content"&gt;
    &lt;/div&gt;
    &lt;div class="sticky-element"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.modal-content {
    display: flex;
    overflow: auto;
    flex-flow: row nowrap;
  }
  
  .left-content {
    flex: 0 0 300px;
  }
  
  .sticky-element {
    position: sticky;
    top: 0;
    right: 0;
    width: 200px;
  }
  </code></pre>
  
  <p>Again, this works in FF/Chrome but not in Safari. Is there a workaround to get it to work in all browsers? Or is there a different approach I can use to maintain scrollability even with the mouse cursor over the sticky element?</p>