flex not working to make design responsive

问题

I am using React Material components in my application, to make it responsive to various screen sizes i am trying to use flex. Below is my code

<div style={{ display: 'flex', flexWrap: 'wrap', flexWrap: "wrap" }}>
     <div style={{ flexGrow: 1, flexBasis: "25%" }}>
      <Chip />
     </div>
    <div style={{ flexGrow: 1, flexBasis: "25%" }}>
      <Chip />
     </div>
   <div style={{ flexGrow: 1, flexBasis: "25%" }}>
      <Chip />
    </div>
   <div style={{ flexGrow: 1, flexBasis: "25%" }}>
      <Chip />
   </div>
 </div>

In the above code Chip is a component from Material Ui. The above code does not make the chips go down (responsive) as the screen size reduces. What's wrong?

来源：https://stackoverflow.com/questions/59141764/flex-not-working-to-make-design-responsive