CODEWITHSUNDEEP
cssflexboxdisplay
Computer Crafter
Computer Crafter

Reputation: 323

How can I make my flex divs overflow to the next line?

In my website, I have a search which outputs its results in card format, like this: enter image description here

However, when multiple results are displayed, they don't overflow to the next line, but instead the cards stay on the same line and get skinnier, and the content inside the cards looks ugly. It becomes more like this: enter image description here.

The div-card code:

<div class="card">
 <a href="#">
  <div class="image">
   <div class="title">

   </div>
  </div>
 </a>
 <div class="description">
  <h5>Title</h5>
  <p>Description</p>
 </div>
</div>

and the CSS for the card div (I don't think the image and description div css matter here):

.card
{
  height:18em;
  width:14em;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}

As you can see, the divs are flex objects, and I've added the flex-wrap: wrap property, but it doesn't wrap. I've also tried other solutions, such as display: inline or display: inline-block or float: left, none of which work (I've obtained all these solutions from online, mostly Stack Overflow, but since they don't work I had to make another post about this issue).

Could someone help me fix the issue? Remember, the results are output by a search, so it's not possible to manually fix the wraps, by, for example, doing a line break.

Thanks!

Upvotes: 11

Views: 30103

Answers (1)

Aryan Choudhary
Aryan Choudhary

Reputation: 691

the problem is that you are making a single card flex. this is not how flex works the container div in which all of your search result cards appears need to be flex so if we have a div like this

<div class="continer">
    <item1 class="card">
    <item2 class="card">
    <item3 class="card">
    <item4 class="card">
</div>

then you need to do this

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: <as you like it is optional>;
    .... and other properties as you like
}

Upvotes: 31

Related Questions