Css 反应造型错误

我希望你们都平安，今晚一切顺利

过去几天我一直在为这个问题操心。基本上，当呈现我的组件时，它会收到一个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

从“React”导入React；
从“mathjs”进口{phi as goldenRatio，e，pow}；
常量defaultStyle={
背景颜色：“蓝色”，
flex:goldenRatio，
显示：“flex”，
flexDirection：“列”
};
/*尝试将项目添加到没有问题的列表时
尝试添加声明display flex属性的嵌套项时出现问题
也许为名称生成一方，然后分别为描述生成一方（组件）？只是一些想法。。
在那里，我们已经为双方设置了布局
*/
常数项=道具=>{
const{coronalistrests}=props；
console.log（查询结果）；
返回列表结果.map（（项目，索引）=>{
归还物品；
});
};
const CoronaBody=props=>{
//合并主样式
const{style}=props；
常数{
coronaList:{results:coronaListResults=[]}
}=道具；
const mergedStyle={…defaultStyle，…style}；
返回(
);
};
导出默认实体；

---

你自己试试，你会发现在safari上你会得到类似的结果。Safari将按flexbox尺寸比例向下缩放文本高度和宽度。而且这种行为与chrome的行为不同，我认为chrome的行为是正常的。

你能提供一个运行的codesandbox（或类似的）来重现这个问题吗？仅仅为了调试你的代码就让它运行起来，这实际上不是任何人的责任。问题是否在映射某些元素的

DisplayItems

中？您可以使用display:flex映射到一个div，然后说问题在于您执行了不同的操作。请发布导致问题的“不同”代码。嘿，Drew，我解决了问题。该问题是由于我的css中的反模式造成的，这是由于将初始宽度和高度设置为100 vw和100 vh而不是100%和100%。您能否提供一个运行的代码沙盒（或类似）来重现该问题？仅仅为了调试你的代码就让它运行起来，这实际上不是任何人的责任。问题是否在映射某些元素的

DisplayItems

中？您可以使用display:flex映射到一个div，然后说问题在于您执行了不同的操作。请发布导致问题的“不同”代码。嘿，Drew，我解决了问题。该问题是由于我的css中存在反模式，这是由于将初始宽度和高度设置为100 vw和100 vh而不是100%和100%引起的。

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;