Flex container makes my divs not go to the next line

Question

I'm new to flex containers, but I'm trying to have a container with justify: space-around, and have some divs inside it. If the screen gets too small, the inner divs should space out to the next line, but instead the inner divs stubbornly stay on the same line and just adjust their widths weirdly.

.container{
  display: flex;
  justify-content: space-around;
}
.inner-div{
  width: 40%;
  display: inline-block;
}

You would think if I had three inner divs in the container, the third one would just go to the next line, considering they're all have width: 40%, but instead they stay on the same line and squish the first then second div.

Answer 1

flex-wrap:wrap; will work in this case.

The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container.

Syntax : flex-wrap: nowrap|wrap|wrap-reverse|initial;

Answer 2

Set your flex-wrap to wrap . I just answered the same question like an hour ago. https://stackoverflow.com/a/59553958/1195615

Answer 3

在其他方面，我建议您使用媒体查询而不是 flex，这样您就可以控制不同的分辨率/设备大小。