How to prevent DIV wrapping on the second row? [duplicate] - html

Question

This question already has answers here:
Is it possible to prevent wrapping of child elements in HTML?
(3 answers)
Stop flex children wrapping
(2 answers)
Prevent wrapping in flex items
(1 answer)
Closed 11 months ago.
I'm trying to make a very simple list of cards, there should be 3 cards in each row with a 20 pixels gap between them. Thus, each card should occupy 1/3 of the parent container. But for some reason, when I decrease the size of the browser window, the 3rd card moves to the second row. How can I prevent this?
.parent{
border: solid green 1px;
display: flex;
flex-wrap: wrap;
width: 1000px;
height: 100px;
gap: 20px;
}
.child{
width: 32.2%;
border: solid blue 1px;
background-color: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Answer 1

flex-wrap: nowrap; should do the trick for you. You can set the width for the children by doing calc(100% / 3);. For this to work, remove the fixed width of 1000px on the parent.
.parent{
border: solid green 1px;
display: flex;
flex-wrap: nowrap;
height: 100px;
gap: 10px;
}
.child{
width: calc(100% / 3);
border: solid blue 1px;
background-color: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Using ul:
.parent {
border: solid green 1px;
display: flex;
flex-wrap: wrap;
width: 1000px;
height: 100px;
gap: 10px;
list-style-type: none;
padding-inline-start: 0;
}
.child {
border: solid blue 1px;
background-color: blue;
flex-basis: 31%;
}
<ul class="parent">
<li class="child"></li>
<li class="child"></li>
<li class="child"></li>
<li class="child"></li>
<li class="child"></li>
<li class="child"></li>
</ul>

Answer 2

You can change in your parent container flex-wrap: nowrap; And the item width you can change to 100%;
.parent{
border: solid green 1px;
display: flex;
flex-wrap: nowrap;
width: 1000px;
height: 100px;
gap: 20px;
box-sizing: border-box;
}
.child{
width: 100%;
border: solid blue 1px;
background-color: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
UPDATE
With flex-basis
.parent{
border: solid green 1px;
display: flex;
flex-wrap: wrap;
width: 1000px;
height: 100px;
gap: 20px;
box-sizing: border-box;
justify-content: space-between;
}
.child{
flex-basis: 30%;
border: solid blue 1px;
background-color: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>