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

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'>
{, key:string) => {
  return (
    <li key={key} className='article'>
    <img  src={data.images[0]}></img>
.box {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  align-items: stretch;
  margin: 2%;
  flex-wrap: row wrap;

Update: I was missing ‘flex-wrap: wrap;’ Thanks everyone

>Solution :

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

Leave a Reply