Safari 16中Flexbox列方向align-items:flex-start失效问题求助

我肯定哪里操作有误，这看起来是很基础的问题，但在Safari浏览器中，align-items:flex-start无法让column方向的Flexbox子元素正确左对齐。该问题在Chrome及其他浏览器中表现正常，在我们使用MUI Data Grid的应用中出现，且用简单HTML复现也得到相同结果。会不会是我的环境存在异常？

代码示例 #

<center>
  <div style={{width:"200px", display:"flex", flexDirection:"column", alignItems:"flex-start", justifyContent:"center", backgroundColor:"yellow"}} >
    <div style={{width:"20px", height:"20px", backgroundColor:"pink"}} > </div>
    <div style={{width:"100px", height:"20px", backgroundColor:"red"}} > </div>
    <div style={{width:"10px", height:"20px", backgroundColor:"green"}} > </div>
  </div>
</center>

显示效果 #

Safari中的显示效果 #

Chrome中的正确显示效果 #

求助！

内容的提问来源于stack exchange，提问作者Conectere