Kevin Powell - Community•2mo ago

How to Enable Responsive Horizontal Scrolling for Flex Items in CSS?

I'm trying to create a responsive horizontal scrolling effect for a set of .package items using Flexbox in CSS. When there are more items than can fit on the screen, I want the overflow items to be accessible via horizontal scroll. This should be responsive based on the user's screen width. However, I'm encountering issues when the screen width is smaller than 1200px. The items either overflow without enabling scroll, or they don't display as intended. html code

<div class="flex flex-column justify-content-around align-items-center gap-5 w-full">
<div>other div</div>
<div class="parent-container">
  <div class="package-container">
    <div class="package-wrapper">
      <div class="package">Package 1</div>
      <div class="package">Package 2</div>
      <div class="package">Package 3</div>
      <div class="package">Package 4</div>
    </div>
  </div>
</div>
<div>other div</div>
</div>

<div class="flex flex-column justify-content-around align-items-center gap-5 w-full">
<div>other div</div>
<div class="parent-container">
  <div class="package-container">
    <div class="package-wrapper">
      <div class="package">Package 1</div>
      <div class="package">Package 2</div>
      <div class="package">Package 3</div>
      <div class="package">Package 4</div>
    </div>
  </div>
</div>
<div>other div</div>
</div>

css code

.parent-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.package-wrapper {
display: flex;
flex-wrap: nowrap; 
align-items: center;
justify-content: flex-start;
overflow-x: auto;
scroll-behavior: smooth;
gap: 2rem;
padding: 1rem 0;
}
.package {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
text-align: center;
height : 25rem;
padding:1 4rem;
background: #f1f1f180;
border-radius: 20px;
gap: 15px;
margin: 1rem 0;
}

.parent-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.package-wrapper {
display: flex;
flex-wrap: nowrap; 
align-items: center;
justify-content: flex-start;
overflow-x: auto;
scroll-behavior: smooth;
gap: 2rem;
padding: 1rem 0;
}
.package {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
text-align: center;
height : 25rem;
padding:1 4rem;
background: #f1f1f180;
border-radius: 20px;
gap: 15px;
margin: 1rem 0;
}

6 Replies

ἔρως•2mo ago

limit the width of .package-container with max-width

iiHiki LN25OP•2mo ago

Thank you so much, you've helped me a lot with this!

ἔρως•2mo ago

you're welcome

Sleep Twitch•2mo ago

Why so many nested divs though? Can't you combine parent-container, package-container, package-wrapper all in 1 div instead of 3 nested ones?

ἔρως•2mo ago

not really, no it's possible to reduce by 1 div, so there's 2 divs but you need 2 you can try to go lower, but i've seen flex doing funky things the problem is that you need a parent that is overflowing, and one that isn't overflowing, to restrain the scrollbar

Sleep Twitch•2mo ago

I see, yes

Gaming

Programming

How to Enable Responsive Horizontal Scrolling for Flex Items in CSS?