Different auto sizing on Chrome and Safari Mobile

I am making a chat app with React JS and there is a weird sizing problem on Safari that I can't find any info on. Right now the CSS for the message components is the following:

.Message {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 80%;
  margin: 0.5rem;
  background-color: rgba(255, 255, 255, 0.11);
  -webkit-border-radius: 0.5rem;
          border-radius: 0.5rem;
  padding: 0.5rem;
  height: auto;
}

Here is Android compared to iOS:

iOS

Android

As you can see, on Chrome Android it renders with no issues, while with Safari the message divs are just too small. With min-height set to 3.5 rem it works on Safari too, however, the divs do not expand based on the content then. Please let me know what may be causing the issue, looking forward to your help.