How to make overflow-y work in safari?

Question

css

Hello. Please help, I'm out of ideas.

I'm making a type of messenger - with a container:

<div id="chat" class="chat">
            
          </div>

Where the user's messages are added to "beforeEnd' one at a time. It is

necessary that the dialogue starts like in a telegram, for example, - that is, the first messages added go to the bottom of the block. For this, markup was made

<div id="chat" class="chat">
            <div class="top-chart"></div>

          </div>

.chat {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.top-chart {
  flex-grow: 1;
}

Everywhere everything is ok, except for iPhones with safari - messages do not go up, and are compressed in a block - trying to fit on the screen.
Why? A - we don't have flex-wrap: wrap, we add:

.chat {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow-y: auto;
}

.top-chart {
  flex-grow: 1;
}

On iPhones, everything becomes normal - it works, BUT! Now, on other browsers, messages do not go up and are not compressed - they jump to the second line - off the screen.

Who faced? Any ideas how to win?
It is possible without flex, but while the first messages are displayed at the bottom of the block (with margin-top: auto - also does not work - messages are compressed)
with justify-content: flex-end - overflow-y: auto does not work; (scroll disappears completely)...

Thanks in advance for your replies...