Align items flex box column not working on Safari v. 16

Question

I must be doing something wrong as this seems pretty basic, but flex box in the column direction does not correctly align items at the flex-start (left) in Safari for me. It works fine on Chrome and other browsers. The issues comes up in our application when using MUI Data Grid but the same results appear when I recreate the example in simple HTML. Perhaps there's something odd in my environment?

        <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>

Displays in Safari as:

The code renders correctly in Chrome, here:

-Help!

Answer 1

I was able to identify the issue. I had wrapped the above coding using the HTML tag in order to center the flex column on the page. I'll edit my question to show the tags. This worked perfectly in Chrome but the tag caused the problem with Safari. I removed the center tags and replaced with divs with horizontal margins set to auto, which centers content and this resolved the issue in Safari. I had not realized that the Center tag was deprecated, which is probably why it causes Safari to not handle the column flex box correctly.