How do I get this flex container to wrap in React?-CodePudding

I'm trying to make a list of cards with images and a short description but I can't figure out the CSS here. This is iterating through JSON data. I can't get the flexbox to wrap to the next line. It keeps adding new articles to the first line.

<div className='box'>
{artData.map((data:any, key:string) => {
  return (
    <li key={key} className='article'>
    <div>
    <img  src={data.images[0]}></img>
   </div>
   <br></br>      
   {data.description}</li>);
    })}
</div>

.box {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  align-items: stretch;
  gap:20px;
  margin: 2%;
  flex-wrap: row wrap;
}

Update: I was missing 'flex-wrap: wrap;' Thanks everyone

CodePudding user response：

Maybe the parent element is positioned absolute hence why the .box class isn't restricted?