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

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

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