Свойство переполнения работает странно в Safari как на iOS, так и на MacOS

Question

Я столкнулся с проблемой Safari, указанной c со свойством переполнения css, при создании внешнего интерфейса чат-бота с использованием ReactJS. В то время как в других браузерах сообщения переполняются должным образом, в Safari они собираются так: Связанные сообщения

CSS в настоящее время выглядит так:

.Messages {
  height: calc(100% - 110px);
  min-height: 0;
  width: 100%;
  white-space: nowrap;
  overflow: scroll;
  position: relative;
  display: flex;
  flex-flow: column;
  margin: 5px;
  margin-top: 40px;
  box-sizing: border-box;
}

@media (min-width: 500px) {
  .Messages {
    margin-top: 5px;
  }
}

Я пробовал overflow: auto и overflow: hidden и различные комбинации манипуляции с осью x / y, но безрезультатно.

Заранее спасибо за ваши комментарии и помощь! 101

Редактировать: Извините, код для воспроизведения отсутствует. Я решил, это было использование display: flex. изменилось на block и это сработало.

Answer 1

Так что получается, что это flexbox с проблемой Safari. Использование display: block вместо display: flex решает его.