Why my content won't clear this flex element? - html

Question

In the snippet below, I have a slider, which works great. There's an h2 that is placed after the primary-content class. The content outside of the `.primary-content' class won't clear the container. I don't understand why.
(function () {
"use strict";
let slides = document.querySelectorAll(".testimonial__item"),
button = document.getElementById("button"),
arrows = document.querySelectorAll(".icon"),
carouselCount = 0,
scrollInterval,
interval = 5000;
arrows[0].addEventListener("click", function (e) {
e = e || window.event;
e.preventDefault();
carouselCount -= 100;
slider();
if (e.type !== "autoClick") {
clearInterval(scrollInterval);
scrollInterval = setInterval(interval);
}
});
arrows[1].addEventListener("click", sliderEvent);
function sliderEvent(e) {
e = e || window.event;
e.preventDefault();
carouselCount += 100;
slider();
}
function slider() {
switch (carouselCount) {
case -100:
carouselCount = 0;
break;
case 300:
carouselCount = 0;
break;
default:
break;
}
console.log(carouselCount);
for (var i = 0; i < slides.length; i += 1) {
slides[i].setAttribute(
"style",
"transform:translateX(-" + carouselCount + "%)"
);
}
}
// set timing of dispatch click events
scrollInterval = setInterval(interval);
})();
/* Duru Sans */
#import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 16px;
font-family: "Duru Sans", sans-serif;
}
h2 {
padding: 5px;
background: fuchsia;
width: fit-content;
}
h4 {
font-family: "Lato", sans-serif;
font-size: 2em;
}
.img-fluid {
width: 100%;
height: auto;
}
.primary-content {
padding: 2em;
}
.testimonial__carousel {
width: 100%;
position: relative;
display: block;
flex-direction: column;
overflow-x: clip;
}
.testimonial__carousel--top {
display: flex;
flex-direction: column;
}
#media screen and (min-width: 576px) {
.testimonial__carousel--top {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
#media screen and (min-width: 768px) {
.testimonial__carousel {
max-height: 320px;
}
}
.testimonial__icons {
display: flex;
justify-content: flex-start;
margin-top: 2rem;
margin-bottom: 2rem;
}
.testimonial__icons button.icon {
background: transparent;
border: 0;
display: flex;
align-items: center;
cursor: pointer;
padding: 0;
}
.testimonial__icons button.icon-left {
margin-right: 1.25rem;
}
.testimonial__icons button.icon img {
height: 25px;
width: 25px;
}
.testimonial__items {
flex: 1;
color: #000;
}
.testimonial__item {
width: 100%;
transition: transform 1s;
background: #f2f5f9;
display: flex;
flex-direction: column;
justify-content: center;
}
#media screen and (min-width: 576px) {
.testimonial__item {
flex-direction: row;
}
}
.testimonial__item.first {
left: 0;
position: absolute;
}
.testimonial__item.second {
left: 100%;
position: absolute;
}
.testimonial__item.third {
left: 200%;
position: absolute;
}
.testimonial__img {
min-width: 40%;
}
.testimonial__content {
background: #f2f5f9;
padding: 2.75rem 2.5rem 2.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#media screen and (min-width: 768px) {
.testimonial__content {
padding: 3.5rem;
}
}
.testimonial__credits {
display: flex;
flex-direction: column;
margin-top: 2rem;
border-left: 4px solid #005fec;
padding-left: 0.75rem;
}
.testimonial__name {
margin-bottom: 0.5rem;
}
<div class="primary-content">
<h4>Testimonials</h4>
<div class="testimonial__carousel">
<div class="testimonial__carousel--top">
<h3>People love it here. See why</h3>
<div class="testimonial__icons">
<button class="icon icon-left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Feather-arrows-arrow-left.svg/768px-Feather-arrows-arrow-left.svg.png" alt="">
</button>
<button class="icon icon-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Feather-arrows-arrow-right.svg/1200px-Feather-arrows-arrow-right.svg.png" alt="">
</button>
</div>
</div>
<div class="testimonial__items">
<div class="testimonial__item first">
<div class="testimonial__img">
<img class="img-fluid" src="https://nextivaweb.imgix.net/heroes/case-study/Case-Study-Conan-hero.jpg?w=336&h=412&auto=format&crop=focalpoint&fit=crop&fp-x=.75&fp-z=1.3&fp-y=.39" alt="">
</div>
<div class="testimonial__content">
<div class="testimonial__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti laboriosam fugiat perferendis blanditiis, dignissimos temporibus sunt aliquam sequi quia! Deleniti earum quibusdam dolorem accusantium ipsum?</div>
<div class="testimonial__credits">
<span class="testimonial__name kicker kicker--bold">Lorem, ipsum.</span>
<span class="testimonial__position kicker kicker--light">Lorem ipsum dolor sit amet,
Burbank,
CA</span>
</div>
</div>
</div>
<div class="testimonial__item second">
<div class="testimonial__img">
<img class="img-fluid" src="https://sandbox-uploads.imgix.net/u/1630477471-dd0cd5b16967417586c822d6dabcb995?w=336&h=412&auto=format&crop=focalpoint&fit=crop" alt="">
</div>
<div class="testimonial__content">
<div class="testimonial__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti laboriosam fugiat perferendis blanditiis, dignissimos temporibus sunt aliquam sequi quia! Deleniti earum quibusdam dolorem accusantium ipsum?</div>
<div class="testimonial__credits">
<span class="testimonial__name kicker kicker--bold">Lorem, ipsum.</span>
<span class="testimonial__position kicker kicker--light">Lorem ipsum dolor sit amet,
Burbank,
CA</span>
</div>
</div>
</div>
<div class="testimonial__item third">
<div class="testimonial__img">
<img class="img-fluid" src="https://sandbox-uploads.imgix.net/u/1630477587-e54d61f4eef5e36c72dccd1fc0463514?w=336&h=412&auto=format&crop=focalpoint&fit=crop" alt="">
</div>
<div class="testimonial__content">
<div class="testimonial__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti laboriosam fugiat perferendis blanditiis, dignissimos temporibus sunt aliquam sequi quia! Deleniti earum quibusdam dolorem accusantium ipsum?</div>
<div class="testimonial__credits">
<span class="testimonial__name kicker kicker--bold">Lorem, ipsum.</span>
<span class="testimonial__position kicker kicker--light">Lorem ipsum dolor sit amet,
Burbank,
CA</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="test-flex-parent">
<h2 class="flex-child">Hello</h2>
<h2 class="flex-child">World</h2>
</div>