Как сделать, чтобы overflow-y работал в сафари?

Question

[Павел]

Здравствуйте. Прошу помощи, уж свои идеи кончились.

Делаю типо мессенджер - с контейнером:

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

Куда добавляются сообщения пользователя в "beforeEnd' по одному.

Нужно чтобы диалог начинался как в телеграмме, например, - то есть первые добавленные сообщения попадают вниз блока. Для этого была сделана разметка

<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;
}

Везде всё ок, кроме айфонов с сафари - сообщения не уходят вверх, и сжимаются в блоке - пытаясь поместиться на экран.
Почему? А - у нас нет flex-wrap: wrap, добавляем:

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

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

На айфонах все становится нормально - работает, НО! Теперь на остальных браузерах сообщения не уходят вверх, и не сжимаются - перескакивают на вторую строку - за экран.

Кто сталкивался? Есть идеи как победить?
Можно без flex, но тогда, как первые сообщения выводить внизу блока (с margin-top: auto - тоже не работает - сообщения сжимаются)
с justify-content: flex-end - не работает overflow-y: auto; (прокрутка полностью исчезает)...

Заранее спасибо за ответы...

Comments

[Евгений]

Я бы порылся в строну:
@media....
Чтобы flex-wrap дать только сафари....