Need help with CSS horizontal scrooling

HTML-CSS
1

I am trying to implement a horizontal card scrolling view but the last card’s border is overlapping with its container’s border. So, can anyone here tell me how can I solve this problem?

2

Hi, you can apply->
flex-wrap: wrap
to .games-container

.games-container{
display: flex;
min-width: 100%;
min-height: 400px;
padding: 5px;
justify-content: space-between;
flex-wrap: wrap;
}

3

Wrapping will shift the items onto next row and deactivate the horizontal scrolling effect.

4

I would use

justify-content: flex-start; (instead of space-between)

5

@FuriousJK, try this:

.games {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 500px;
  background-color: #256c74;
  overflow-x: auto;
}

/* You don't need cards-container at all! */

.game-cards {
  position: relative;
  flex: 0 0 300px;
  height: 300px; /* or whatever it is */
  border: 1px solid #fff;
  margin-left: 20px;
}
/*put small 1px line with width of your gaps that will push content a little further ;) */
.game-cards:last-child::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 1px;
  left: 100%;
}
1 Like
6

Thank you so much, this solved the problem! :smiley:

By the way, I don’t understand the height part. How setting the height to 1px is generating the line?

7

It’s not necessarily a line, just an element that looks like it (20px x 1px). 1px is a minimum height, just to make sure it definitely less than the rest of your content on the page. This solution is the first that came to my mind, I’m sure there is a ‘correct’ way to do this, you may try add !important to margin-right on the last card, though I’m not sure it will prevent margin from collapsing. Just google “Prevent margin from collapsing on x-scroll” or something like that