CODEWITHSUNDEEP
htmlcssflexbox
Billy Keef
Billy Keef

Reputation: 31

My flexbox items are overflowing the container... how to prevent this?

Hello I am trying to make 1 container with a a bunch of cards or listings inside of the container. The cards are overflowing over the right side instead of wrapping into a new row below the first row.

Please help mee out, I'm a newer dev and still kind of mind boggled by flexbox.... if you have any good resources to master the basics, please share as well!


.all-listings {
  display: flex;
  align-items: stretch;
  width: 100%;
  flex-basis: 0;
}

.listing-preview {
  margin: 10px;
  padding: 15px;
  width: 300px;
  height: 400px;
  background-color: white;
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 14px 1px rgba(135, 132, 135, 1);
  -moz-box-shadow: 5px 5px 14px 1px rgba(135, 132, 135, 1);
  box-shadow: 5px 5px 14px 1px rgba(135, 132, 135, 1);
}

Upvotes: 0

Views: 124

Answers (1)

Youssef
Youssef

Reputation: 96

Add flex-wrap: wrap to .all-listings.

As for resources, I recommend checking out Traversy Media's channel on YT.

Upvotes: 1

Related Questions