How to move column to next row if my 1st row has 5 div box-CodePudding

Hello guys can anyone help me here, I've tried using display flex. However, the 6th box is overlapping I want my 6-10 Box stay on the 2nd row and if I add the 11th box it should start on the 3rd row can anyone help me with how can I accomplish it? Currently, it's working however my style is overlapping.

.question-list-w {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
    height: 500px;
}

.question-list-w .horizontal-card {
    flex: 0 0 85px;
}
.horizontal-card {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 5px;
}

<div >
<div >
    <div ></div>
    <div >survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing traset sheets cont</div>
    <div >
        <button  type="button" question-number="1">Show</button>
        <button  question-number="1">Start</button>
    </div>
</div>

<div >
    <div ></div>
    <div >survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing traset sheets cont</div>
    <div >
        <button  type="button" question-number="1">Show</button>
        <button  question-number="1">Start</button>
    </div>
</div><div >
    <div ></div>
    <div >survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing traset sheets cont</div>
    <div >
        <button  type="button" question-number="1">Show</button>
        <button  question-number="1">Start</button>
    </div>
</div><div >
    <div ></div>
    <div >survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing traset sheets cont</div>
    <div >
        <button  type="button" question-number="1">Show</button>
        <button  question-number="1">Start</button>
    </div>
</div><div >
    <div ></div>
    <div >survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing traset sheets cont</div>
    <div >
        <button  type="button" question-number="1">Show</button>
        <button  question-number="1">Start</button>
    </div>
</div><div >
    <div ></div>
    <div >survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing traset sheets cont</div>
    <div >
        <button  type="button" question-number="1">Show</button>
        <button  question-number="1">Start</button>
    </div>
</div>
</div>

CodePudding user response：

.flex {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.flex>.item {
  width: calc(20% - (40px / 5));
  height: 50px;
  background-color: green;
  color: white;
}

<div >
  <div > 1 </div>
  <div > 2 </div>
  <div > 3 </div>
  <div > 4 </div>
  <div > 5 </div>
  <div > 6 </div>
  <div > 7 </div>
  <div > 8 </div>
  <div > 9 </div>
  <div > 10 </div>
  <div > 11 </div>
  <div > 12 </div>
</div>

Make sure add flex-wrap to wrap and set flex child width dimention;

CodePudding user response：

Use percentage instead of px on the flex-basis so that it won't overflow. It will only take height of available spaces.

.question-list-w {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    height: 500px;
}

.card {
    flex: 0 0 17%;  /*grow | shrink | basis */
}
.card {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 5px;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div >10</div>
  <div >11</div>
</div>