Как показать полученную карту ответа бок о бок с помощью CSS в React

Question

Я использую маршрутизатор ax ios, чтобы получить результат от API, мне нужно показать ответ в таком формате:

Но я получаю результаты, как это ниже.

My React и CSS код, как показано ниже.

Мне нужно, чтобы мой третий дочерний элемент div находился во 2-й строке, но проблема в том, что родительский объект превышает допустимую максимальную ширину, когда дочерний элемент div имеет длинные строки. и это мешает другому div рядом с родительским div

  render() {
    return <div className="sdFoodScreenMain">

        { this.state.item.map(item =>
            <div className="sdFoodBoxes" key={item.id}>
                <p>{item.username}</p>
                <p>{item.name}</p>
            </div>
        )}

    </div>;
  }
}

export default SdFoodScreen;

CSS code:

.sdFoodScreenMain{
  float: left;
  max-width: 55%;
}

.sdFoodBoxes{
  display: flex;
  flex-direction: column;
  background-color: red;
  max-width: 30%;
}

Answer 1

Попробуйте настроить sdFoodScreenMain, чтобы иметь flex и flex-wrap.

.sdFoodScreenMain{
  float: left;
  max-width: 55%;
  display: flex;
  flex-wrap: wrap;
}

Редактировать: Вот как я бы сделал это с flex. Изменяя max-wdith на .sdFoodBoxes на flex-based.

.sdFoodScreenMain{
  float: left;
  max-width: 55%;
  display: flex;
  flex-wrap:  wrap;
}

.sdFoodBoxes{
  display: flex;
  flex-direction: column;
  background-color: red;
  flex-basis: 30%;
}

https://stackblitz.com/edit/react-cdghjn?file=style.css

Вот как я бы это сделал с сеткой css:

Они совершают sh разные вещи, так что, в конечном итоге, вам решать.

.sdFoodScreenMain{
  float: left;
  max-width: 55%;
  display: grid;
  grid-template-columns: 30% 30% 30%;
}

.sdFoodBoxes{
  display: flex;
  flex-direction: column;
  background-color: red;
}

https://stackblitz.com/edit/react-nc88cy?file=style.css