Mobile safari - on screen keyboard hiding some elements

I'm building a very simple POC for an HTML chat app, using flexbox. The idea is to have chat messages which start at the bottom of the message window. Typical stuff.

I did this by using a nested flexbox with an inner div set to flex-direction: column and an outer div set to flex-direction: column-reverse and overflow-y: auto:

<div class="outer">
    <div id="messages" class="inner">
        <div class="message">hello</div>
    </div>
</div>

.outer {
    flex-grow: 1;
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
}

.inner {
    display: flex;
    flex-direction: column;
}

It works well for desktop browsers:

It also works fine on iOS safari up to a certain number of messages. However at some point the new messages get hidden behind the onscreen keyboard and the only way to see them is either to manually scroll down or close the on screen keyboard. Note: opening the keyboard again will no longer hide the messages, closing the keyboard seems to reset the scroll.

Opening Safari dev tools reveals something interesting. When selecting an html element Safari thinks it is where it should be, in fact the preceding element is shown:

Notice how I selected the last element "Two" but dev tools highlights message "One"

Something else I noticed. Changing the outer div's overflow-y to hidden solves the problem, but obviously I can no longer scroll through the messages.

I'm guessing the issue is related to having two sets of scroll bars, one for the div and one for the page itself which is shifted by the keyboard.

Does anyone know why this is happening and how to prevent it?

I've created a fiddle and also hosted the page on S3

On my phone, adding around 12/13 messages is enough for them to start "hiding" behind the keyboard.

from Mobile safari - on screen keyboard hiding some elements