Flex没有使项目响应答案

【问题标题】：Flex not making item responsiveFlex没有使项目响应
【发布时间】：2020-04-03 11:11:12
【问题描述】：

我在 Flex 中使用 highcharts 使其在所有屏幕尺寸上都具有响应性，但它对移动屏幕没有响应。下面是我在 reactJs 中的代码，问题在 https://codesandbox.io/s/highcharts-react-demo-s31oo

<div>
   <Box display="flex" flexWrap="wrap" flexDirection="row">
   <Box m={0.5} style={{ flexBasis: "48%", minWidth: '0' }}>
     <LineChart
       chartData={ChartData}
     />
    </Box>
    <Box m={0.5} style={{ flexBasis: "48%", minWidth: '0' }}>
     <LineChart
       chartData={ChartData2}
     />
    </Box>            
    </Box>
  </div>

我的设计有什么问题？

【问题讨论】：

同样的问题：stackoverflow.com/q/59141764/8620333 .. 我会添加相同的 cmets
@TemaniAfif 感谢您的评论，但我无法使我的代码正确..请您在我的示例中建议我..谢谢

标签： css reactjs responsive-design flexbox

【解决方案1】：

你能用flexGrow: 1

 <div>
        <Box display="flex" flexWrap="wrap" flexDirection="row">
          <Box m={0.5} style={{ flexBasis: "48%", minWidth: "0", flexGrow: 1 }}>
            <Chart chartData={options} />
          </Box>
          <Box m={0.5} style={{ flexBasis: "48%", minWidth: "0", flexGrow: 1 }}>
            <Chart chartData={options} />
          </Box>
        </Box>
      </div>

【讨论】：