title: On Safari, if an ancestor has 'display: flex' and a descendent, 'position: sticky', it will only stick for the height of it's wrapper
body: <p>As asked, but not answered here: <a href="https://stackoverflow.com/questions/56869420/position-webkit-sticky-works-only-uptill-the-height-of-the-container-within-a">position: -webkit-sticky works only uptill the height of the container within a flexbox child on Safari(12.1.1)</a></p>
  <p>This is an ongoing issue and easily reproduced: <a href="https://jsfiddle.net/4ea9mdkn/" rel="nofollow noreferrer">https://jsfiddle.net/4ea9mdkn/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flexbox-wrapper {
    display: flex;
  }
  .overflow-box {
    background-color: blue;
    height: 200px;
    overflow: auto;
  }
  .sticky {
    position: sticky;
    top: 0;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flexbox-wrapper"&gt;
    &lt;div class="content-wrapper"&gt;
    &lt;div class="overflow-box"&gt;
      This is the regular box
      
      &lt;div class="sticky"&gt;
      This is the sticky box
    &lt;/div&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    
    
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Does anyone know of a fix for this?</p>