How to make gallery row go to new line with flex - html

Question

I have been trying to make a gallery like structure to display divs using flex box although I want the divs displayed in rows of three on each column. This is where my problem lies.So if I have four divs three should be dislayed on the one line and one should drop to the next. However in my case all the divs however many carry on on the one line and never drop.
Here is my HTML code
<div class="container">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat,
doloribus vel fuga?
</p>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat,
doloribus vel fuga?
</p>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat,
doloribus vel fuga?
</p>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
perferendis dolor, ducimus facilis voluptas provident consectetur natus modi
eum soluta dolores explicabo deserunt debitis incidunt aperiam placeat,
doloribus vel fuga?
</p>
</div>
</div>
Here is my CSS code
.container{
display:flex;
justify-content:space-evenly;
align-items:center;
}
.inner{
width:30%;
background:#efefef;
margin-left:1.662%;
margin-right:1.662%;
}

Answer 1

You just need to add the flex-wrap to your flex.
.container{
display:flex;
justify-content:space-evenly;
align-items:center;
flex-wrap: wrap;
}
Since each box is 30% the forth will drop to the next line.
ex. https://jsfiddle.net/pqec64x0/6/