Flex 没有使项目响应

Question

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

我的设计有什么问题？

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

Flex 没有使项目响应

Flex not making item responsive

css

flexbox

responsive-design

reactjs