CSS DIV要素が入る分だけ横並び

Question

固定幅のdiv-subboxをdiv-mainboxに横並びに入れているのですが
画面からはみ出た分を折り返して表示したいです。

div-mainboxにfloat:left;をしても効かず、
display:block だと縦に並んでしまいますし、
overflow: visible;も効果なかったです

このような場合は、どのような対応をするのでしょうか。

.div-mainbox{
  display:flex ;
  padding: 15px 20px;
  margin: 0 8px 8px;
 }

.div-subbox{
  display:block ;
  border: 5px solid #61a054;
  background-color: #61a054;
  border-radius: 20px;
  width:350px;
  min-width:350px;
  height: 250px;
  padding: 5px 5px;
  margin: 10px;
  text-align: center;
  color:white;
  position: relative;
 }

Comments

[m.ts10806]

HTMLがないと応えようがないかと・・

Answer 1

flex-wrap: wrap;を追加したらどうでしょう。

.div-mainbox{
  display:flex ;
  flex-wrap: wrap; /* 追加 */
  padding: 15px 20px;
  margin: 0 8px 8

Comments

[Qoo]

できました！ありがとうございます！