Css Safari浏览器上的Flexbox布局中断

我正在尝试使用引导和自定义CSS代码创建聊天消息样式的页面。该代码在chrome浏览器上运行良好，但在Safari mobile和桌面上，布局正在破坏

问题是带有图像的消息div重叠，这意味着图像和文本显示在彼此的顶部。如果运行下面的示例代码，最后两条消息将显示在彼此的顶部。在Chrome浏览器上，它可以正确显示

我甚至检查了我所有的CSS并加上前缀，这样它就可以在不同的浏览器上工作，但它似乎不会影响Safari浏览器

任何帮助都将不胜感激。谢谢

.messages div:类型的第一个{
页边距顶部：0！重要；
}
.留言{
高度：69vh；
溢出y：自动；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
溢出x：隐藏；
}
.个人资料图像{
高度：50px；
宽度：50px；
-o-object-fit：包含；
对象匹配：包含；
边界半径：100%；
边框：1px实心#EFEF；
}
.留言{
空白：行前；
}
@介质（最大宽度：500px）{
.留言{
高度：300px；
}
.个人资料图像{
高度：30px；
宽度：30px；
}
.阿凡达圈sm{
高度：30px；
宽度：30px；
}
.avatar circle sm.首字母缩写{
顶部：2.5px；
字体大小：16px；
}
}
.附件{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
字体大小：0.8rem；
}
.附件a{
颜色：#0056b3；
字体大小：粗体；
宽度：-webkit适合内容；
宽度：-moz-fit内容；
宽度：适合的内容；
}
.附件.上载预览{
最大宽度：200px；
最大高度：200px；
-o-object-fit：包含；
对象匹配：包含；
}
.个人资料图像{
-o-object-fit：封面！重要；
适合对象：封面！重要；
}
.dropdown.settings.dropdown切换：：after{
显示：无；
}
.dropdown.settings.dropdown切换{
填充：0；
保证金：0；
背景：透明；
边界：无；
显示：无；
}
.msg:悬停{
背景:#f3；
}
.msg:hover.dropdown.settings.dropdown切换{
显示：块；
}
.dropdown.settings.下拉菜单li{
填充物：5px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
.dropdown.settings.下拉菜单li i{
宽度：20px；
}
.dropdown.settings.下拉菜单li:悬停{
光标：指针；
背景#f1f1；
}
.留言{
溢出y：滚动；
滚动条宽度：无；
-ms溢出样式：无；
}
.messages:：-webkit滚动条{
宽度：0；
身高：0；
}
.files容器{
最大高度：235px；
溢出：自动；
}
味精{
保证金：0.1.5雷姆；
}
.日期行{
背景：#F7F7F7；
填充：5px20px；
}
.留言{
位置：相对位置；
}
.固定日期行{
背景：#F7F7F7；
填充：5px20px；
位置：固定；
宽度：100%；
z指数：10；
显示：无；
}
@介质（最大宽度：500px）{
味精{
保证金：0.5雷姆；
}
}
.clearfix:：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
.附件：在，
.附件：，
d-flex：之前，
d-flex：之后{
内容：正常；
}
.附件组{
-ms-flex:0自动；
-webkit-box-flex:0；
flex:0自动；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：开始；
-ms-flex-align：开始；
调整项目：灵活启动；
}

消息-Safari测试
2020年4月2日，星期四
用户2

删除
quote

下午四时五十一分
你好
用户1

quote

下午五时零三分
你好
用户2

删除
quote

晚上8:29
你好这是一条测试消息
测试另一条消息123
用户2

删除
quote