Content won't overflow even with CSS property - html

Question

I'm having trouble to make the content scroll in smaller viewport even with overflow property. My goal is to maintain the size of each image box and with the ability to scroll horizontally when the viewport is minimized.
.block-content {
width: 100%;
height: 100%;
}
.block-content .even-content {
display: flex;
position: relative;
width: 100%;
margin: 0 auto;
overflow: auto;
white-space: nowrap;
}
.even-content>* {
flex: 1;
}
.container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.image {
width: 100%;
height: 100%;
transition: all .5s ease;
object-fit: cover;
object-position: center;
}
.card-text {
padding: 3.75rem;
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
}
.card-text h3 {
color: white;
margin-bottom: 2rem;
font-size: 2.25rem;
}
.card-text .fa-arrow-right {
margin-right: 10px;
}
.container:hover .image {
transform: scale(1.03);
}
<section class="block-content">
<div class="even-content scroll-menu">
<div class="container">
<img src="https://cdn.shopify.com/s/files/1/0598/5071/9391/files/homepage_update_september_23_04_900x.png?v=1663942261 alt=" " class="image ">
<div class="card-text ">
<h3>Pack Heavy <br><i class="fa-solid fa-arrow-right "></i>Chase Light</h3>
<button class="button ">Watch Now</button>
</div>
</div>
<div class="container ">
<img src="https://cdn.shopify.com/s/files/1/0598/5071/9391/files/homepage_us_au_mid_august_04_900x.png?v=1660903200 " alt=" " class="image ">
<div class="card-text ">
<h3>Midnight Sun</h3>
<button class="button ">Shop</button>
</div>
</div>
<div class="container ">
<img src="https://cdn.shopify.com/s/files/1/0598/5071/9391/files/homepage_update_september_23_05_ecfb361d-bd54-4d01-b9f1-0669bfd82552_900x.png?v=1663943416 " alt=" " class="image ">
<div class="card-text ">
<h3>SS22</h3>
<button class="button ">Shop</button>
</div>
</div>
</div>
</section>
Return to post

Answer 1

Your issue comes from this block:
.even-content>* {
flex: 1;
}
flex is a shorthand for the following CSS properties:
flex-grow
flex-shrink
flex-basis
Those blocks are similar:
.even-content>* {
flex: 1;
}
.even-content>* {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
So, what is happening?
flex-shrink
The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
flex-shrink - MDN
You're telling your .even-content>* that they should shrink without having a minimum width.
What can you do?
You can add a flex-basis with the minimum width you're willing to have and change your flex-shrink property to 0.
.even-content>* {
flex: 1 0 320px;
}
Full code:
.block-content {
width: 100%;
height: 100%;
}
.block-content .even-content {
display: flex;
position: relative;
width: 100%;
margin: 0 auto;
overflow: auto;
white-space: nowrap;
}
.even-content>* {
flex: 1 0 320px;
}
.container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.image {
width: 100%;
height: 100%;
transition: all .5s ease;
object-fit: cover;
object-position: center;
}
.card-text {
padding: 3.75rem;
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
}
.card-text h3 {
color: white;
margin-bottom: 2rem;
font-size: 2.25rem;
}
.card-text .fa-arrow-right {
margin-right: 10px;
}
.container:hover .image {
transform: scale(1.03);
}
<section class="block-content">
<div class="even-content scroll-menu">
<div class="container">
<img src="https://cdn.shopify.com/s/files/1/0598/5071/9391/files/homepage_update_september_23_04_900x.png?v=1663942261" alt=" " class="image ">
<div class="card-text ">
<h3>Pack Heavy <br>
<i class="fa-solid fa-arrow-right "></i>Chase Light
</h3>
<button class="button ">Watch Now</button>
</div>
</div>
<div class="container ">
<img src="https://cdn.shopify.com/s/files/1/0598/5071/9391/files/homepage_us_au_mid_august_04_900x.png?v=1660903200
" alt=" " class="image ">
<div class="card-text ">
<h3>Midnight Sun</h3>
<button class="button ">Shop</button>
</div>
</div>
<div class="container ">
<img src="https://cdn.shopify.com/s/files/1/0598/5071/9391/files/homepage_update_september_23_05_ecfb361d-bd54-4d01-b9f1-0669bfd82552_900x.png?v=1663943416
" alt=" " class="image ">
<div class="card-text ">
<h3>SS22</h3>
<button class="button ">Shop</button>
</div>
</div>
</div>
</section>
Return to post