CSS-Parent div hiding fixed position child-modal in Safari - css

Question

I have some pretty inconsistent behavior for a modal I made with css. I have a 2 column layout, with content and a sidebar. I've put a modal in the sidebar because I have a button in the sidebar that toggles the modal open and close, and I kind of wanted to keep the button and modal together in the HTML.
The sidebar's content is often larger than the browser window, so to allow users to scroll it independently of the content, I've made the sidebar's position fixed and turned on overflow: scroll.
The problem is that in Safari and sometimes Chrome, the only part of the modal that is visible is the part that's inside the sidebar.
I assume I'll need to restructure my HTML, but I was wondering if there is something else I can do to make Safari render my modal correctly.
Here is an example I made of the problem
HTML
<div class="container">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, nunc eget lobortis efficitur, nisl augue semper lorem, vel laoreet turpis libero non magna. Donec eu massa sed quam venenatis dapibus. Quisque orci tortor, blandit ut velit eget, molestie gravida justo. In pulvinar, mi ac tempus vulputate, sapien ante bibendum mi, sed feugiat ante odio vitae orci. Phasellus mattis nisi ligula, vel eleifend dolor tincidunt vestibulum. Fusce in sodales orci. Morbi at ligula in mi fermentum dapibus ut a sapien. Donec congue arcu ac augue tristique viverra. Praesent erat libero, luctus a porta a, placerat eu nisl. Vestibulum laoreet eros vitae lorem facilisis, id aliquet sem volutpat. Quisque a nulla vitae quam interdum bibendum. Suspendisse convallis diam vitae elit tincidunt bibendum eu ut justo. Sed a dapibus diam.
</p>
<p>
Donec posuere, justo quis dictum imperdiet, nisl odio sodales nisl, id commodo erat nibh id turpis. Cras vestibulum nec mauris et blandit. Etiam dictum, orci vitae posuere scelerisque, urna mi sodales neque, eget commodo quam ex sed diam. Integer a ex cursus, interdum lacus ac, dignissim ligula. Morbi lobortis auctor rutrum. Sed finibus elit at vulputate rutrum. Nam mauris ipsum, vestibulum non tincidunt quis, hendrerit ut tellus. Etiam mollis massa lectus. Curabitur elementum eros ac libero dignissim porttitor. Curabitur augue lacus, pretium ut dolor ac, gravida laoreet risus. Aenean scelerisque tellus suscipit velit sollicitudin semper. Mauris laoreet ante vitae purus pellentesque sagittis. In at risus in ligula rhoncus hendrerit et id dolor. Vivamus pellentesque felis vel dolor malesuada, in egestas nisi ultrices.
</p>
</div>
<div class="sidebar-wrapper">
<div class="parent-sidebar">
<p>
Sed eros dui, porta vel efficitur eget, scelerisque at ante. Sed nunc quam, posuere vel pulvinar non, imperdiet et quam. Proin sed turpis eu neque placerat mollis eget sed erat. Maecenas nec fermentum urna, id pellentesque sem. Donec commodo massa et tincidunt volutpat. Fusce egestas ac nisi quis tincidunt. Ut condimentum lorem ante, in eleifend nulla dapibus vel.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus bibendum porttitor nulla. Integer aliquam varius neque ac facilisis. In hac habitasse platea dictumst. Sed sodales vestibulum aliquet. Aenean vestibulum nulla ut egestas vulputate. Sed quis massa ultrices nulla placerat placerat. Donec tempus justo ac lorem eleifend gravida. In ultricies vestibulum lorem, vel eleifend nunc. Mauris consequat, risus in auctor consectetur, nisl eros pulvinar mauris, a posuere felis urna a nunc. Duis at eleifend dolor.
</p>
<p>
Aliquam eu sem elit. Suspendisse dapibus diam sed mi vehicula lacinia. Duis posuere orci metus, a porta ligula porttitor in. Phasellus id aliquet augue. Quisque sit amet elit lobortis, gravida lorem sit amet, pharetra ipsum. Aliquam urna nisl, commodo eget quam a, cursus lacinia metus. Pellentesque nec nulla velit. Curabitur feugiat in ante semper euismod. Phasellus imperdiet sem quis nulla elementum commodo. Ut at maximus justo, eu accumsan elit.
</p>
<div class="child-modal">
<h1>
I'm a modal!
</h1>
</div>
</div>
</div>
</div>
CSS
.container {
width: 500px;
margin: auto;
}
.content {
width: 75%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.sidebar-wrapper {
width: 25%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.parent-sidebar {
width: inherit;
height: 100vh;
overflow: auto;
position: fixed;
}
.child-modal {
background: white;
position: fixed;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
I made a JSfiddle to show what I mean.