Sticky element not working in nested flex container with overflow (safari)

Question

I am having this weird issue with a sticky element in a nested flex container that has overflow:auto enabled. I am expecting the sticky element to be of the same height as the second element and also to stick to the top of its containing element once it gets scrolled to the threshold (top: 0).

Please note: The behaviour is just fine in Chrome/Edge/Firefox, but not in Safari.

According to this, sticky should work in Safari with prefix -webkit. (https://caniuse.com/?search=sticky)

Is there any good way to make this work in Safari?

Thanks in advance.

.wrapper {
  height: 100px;
  background-color: red;
  display: flex;
}

.container {
  height: 200px;
  display: flex;
  overflow: auto;
  
}

.first {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: blue;
}

.second {
  background-color: yellow;
  height: 500px;
}

<div class="wrapper">
  <div class="container">
    <div class="first">Scroll down
    </div>
    <div class="second">Here</div>
  </div>
</div>

Helpful links for people stumbling across similar issues and want to learn about sticky:

Link 1 on stackoverflow

Link 2 on stackoverflow

Answer 1

This is not a full answer to the question as it involves changing the HTML in a way that may not be suitable for all circumstances, but if we put each of first and second divs in their own containers then Safari (tested on iPad IOS 14) does what's expected.

.wrapper {
  height: 100px;
  background-color: red;
  display: flex;
}

.container {
  height: 200px;
  display: flex;
  overflow: auto;
  
}

.first {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: blue;
}

.second {
  background-color: yellow;
  height: 500px;
}

<div class="wrapper">
  <div class="container">
    <div class="first">Scroll down</div>
    </div>
  <div class="container">
    <div class="second">Here</div>
    </div>
</div>