How can I add a x-axis scrollable slider? - html

Question

I'm trying to add a x-axis scrollable slider, but cant seems to figure it out.
Here, I'm trying to do a horizontal card scroll. If I add padding to the card Wrapper it extends itself out of the body. which I don't want to happen. Therefore I removed the padding and added overflow-x: scroll . I thought it will solve the issue and I will be able to scroll left/right.
Please tell me how to add the scroll without going out of the body.
Thanks in advance.
.services {
display: flex;
flex-direction: column;
width: 100%;
overflow-x: visible;
height: fit-content;
align-items: center;
justify-content: space-between;
padding: 30px 0;
}
.cardWrapper {
display: flex;
background: red;
overflow-x: scroll;
flex-direction: row;
justify-content: space-around;
}
.cardContainer {
width: 500px;
height: 500px;
background: blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.cardContainer .cardsImage {
width: 60%;
}
.cardContainer .cardsImage img {
width: 100%;
}
.cardContainer .cardContents {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="services">
<h1>Our Services</h1>
<div class="cardWrapper">
<div class="cardContainer">
<div class="cardsImage">
<img src="https://via.placeholder.com/300" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="https://via.placeholder.com/300" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="https://via.placeholder.com/300" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
</div>
</div>

Answer 1

You need to have a simple wrapper that acts as a boundary for your scrollbar. Then inside you need the wrapper for your flex contents.
In addition, simple using a width on elements within a flex context is not enough. You need to provide flex as well
.services {
padding: 30px 0;
}
.cardWrapperOuter {
overflow-x: scroll;
}
.cardWrapper {
display: flex;
background: red;
}
.cardContainer {
flex: 0 0 500px;
width: 500px;
height: 500px;
background: blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.cardContainer .cardsImage {
width: 60%;
}
.cardContainer .cardsImage img {
width: 100%;
}
.cardContainer .cardContents {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="services">
<h1>Our Services</h1>
<div class="cardWrapperOuter">
<div class="cardWrapper">
<div class="cardContainer">
<div class="cardsImage">
<img src="./assets/images/QaServices.svg" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="./assets/images/QaServices.svg" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
<div class="cardContainer">
<div class="cardsImage">
<img src="./assets/images/QaServices.svg" alt="Qa Services">
</div>
<div class="cardContents">
<h2>Qa Services</h2>
<p>Our Qa engineers don't just test,they make your software application successful ensuring quality delivery with expert manual and automated testing services.</p>
</div>
</div>
</div>
</div>
</div>