Styles are floating on iphone 6,7,8,se. How to fix?

Question

css

Please tell me how to fix it.

A purple message floats on iPhones. The code is like this

&--user {
    width: auto;
    min-width: 0px;
    display: flex;
    height: auto;
    flex-direction: column;
    max-width: 76%;
    color: #fff;
    padding: 10px 15px 10px 10px;
    align-self: flex-end;
    background: #7b2be0;
    box-shadow: 0px 5px 4px rgba(123, 43, 224, 0.31),
      -5px -5px 5px rgba(255, 255, 255, 0.08);
    border-radius: 15px 15px 0px 15px;
    .message__text {
      color: white;
      text-align: end;
      height: auto;
    }
  }

This is how it should look

Answer 1

{
  display: -webkit-flex; 
  display: flex;
}

These devices do not have full support for the latest CSS 3 features such as flexbox, so prefix -webkit- to appropriate styles