React Styling Bug

Question

Я надеюсь, что вы все в безопасности, и у вас все хорошо сегодня вечером.

Я крутил свои колеса по этой проблеме в течение последних нескольких дней. По сути, когда мой компонент визуализируется, он получает список json результатов в виде реквизитов, а когда он получает эти реквизиты, он сопоставляется с массивом для создания вложенного элемента JSX для каждого элемента как такового:

For every item in json result array, map
div styled with display:flex //root
   div flex 1 //children
   div flex 2 //children
div

import React from "react";
import { phi as goldenRatio, e, pow } from "mathjs";

const defaultStyle = {
    backgroundColor: "blue",
    flex: goldenRatio,
    display: "flex",
    flexDirection: "column"
};

/* When trying to add an item to a list that is no problem
The problem occurs when trying to add a nested item that declares the display flex property

Perhaps generate side for Name, then generate side for Description separately (components)? Just some thoughts..

where we would have the layout already set up for the two sides
*/
const DisplayCoronaItems = props => {
    const { coronaListResults } = props;

    console.log(coronaListResults);
    return coronaListResults.map((item, index) => {
        return <div style={{ flex: 1 }}>Wow an item</div>;
    });
};

const CoronaBody = props => {
    //merge main style
    const { style } = props;
    const {
        coronaList: { results: coronaListResults = [] }
    } = props;
    const mergedStyle = { ...defaultStyle, ...style };

    return (
        <section style={mergedStyle}>
            <DisplayCoronaItems coronaListResults={coronaListResults} />
        </section>
    );
};

export default CoronaBody;

Попробуйте сами, вы заметите на сафари, что вы получите аналогичные результаты. Safari уменьшит высоту и ширину текста пропорционально размерам flexbox. И поведение отличается от того, как ведет себя chrome, что, на мой взгляд, ведет себя нормально.