iiHiki LN25 Posts - Answer Overflow

iiHiki LN25

•Created by iiHiki LN25 on 10/5/2024 in #front-end

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;
}

11 replies

Gaming

Programming