iPad ios 13 safari bug with flexbox

Question

I've been working on a non-scrollable webapp for a while now and everything works fine on Chrome and Firefox. But unfortunately the app has to support ipad as well and I encountered a massive problem with flexboxes there.

.container {
  display: flex;
  flex-dircetion: column;
  height: 100vh;
  width: 100%;
  background-color: #FF8;
}

.header {
  height: 3rem;
  width:100%;
  background-color: #F88;
}

<div>
<div class="container">
  <div class="header"/>
</div>
</div>

For some reason this is 100vh + 3rem high on the iPad and I don't have any idea why.

Does anyone know why it behaves this way?

And if so, is there a workaround?