Nested fixed element cannot be bigger than parent on iOs only - ios

Question

My issue only happens on iOs (on both Safari and Opera), works fine in Chrome, Firefox and even Opera on Windows and Android.
I have the following situation:
<div class="flex-box-parent">
<div class="group01">
<div class="fixed-element">
This element has a position: fixed and z-index: 100
</div>
</div>
<div class="group02">
On iOS, fixed-element does not cover this part
</div>
</div>
I need the fixed element to appear above everything else on my website, as it is a modal with a full-screen backdrop.
Unfortunately, all the content of fixed-element that is bigger than group01is not displayed.
Neither group01 or group02 have a z-index specified. It works perfectly fine on Windows/Android, but on iOS, group02 is always above.
CSS
.flex-box-parent{
position: relative;
display: flex;
flex-direction: column;
}
.fixed-element{
z-index: 100;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
.group01{
position: relative;
flex: 1;
overflow: auto;
}
.group02{
display: flex;
flex-direction: column;
position: relative;
}
MORE INFO #1
As a test, I removed every single reference to z-index in my css, except for the fixed-element. Still not working on iOs (working on everything else)
MORE INFO #2
It seems the problem is that fixed-element cannot go outside the border of its parent on iOS.
It seemed to me that group02 was above fixed-element, but in fact, fixed-element simply cannot go full screen if it means getting bigger than group01. I am still looking for a solution to this issue.

Answer 1

In html you shared div tag is not closed for class .fixed-element. Please fix that and check