CODEWITHSUNDEEP
cssreactjsresponsive-designflexbox
Lara
Lara

Reputation: 3021

Flex not making item responsive

I am using highcharts inside Flex to make it responsive across all screen sizes but its not becoming responsive for mobile screens. Below is my code in reactJs and issue is replicated at 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>

What's wrong in my design?

Upvotes: 1

Views: 66

Answers (1)

Rohit Kaushik
Rohit Kaushik

Reputation: 1302

can you use 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>

Upvotes: 3

Related Questions