Flexbox inside carousel - No resizing

I've successfully coded a simple carousel based on three items being shown inside a flexbox. The movement of the carousel is based on transform:translateX(); However, for some reason, the flexbox items do not resize with the screen. I cannot, for the life of me, figure out why the flexbox items well.. don't really behave like flexbox items (just the align-content: center seems to work). Many thanks in advance!

Markup:

<div class="carousel-wrapper">
    
    <div class="carousel-container carousel-container--one current-container">
        <div class="track">
        <img src="./images/arrow-left.svg" alt="A left arrow" class="carousel-button prev-button">
        <img src="./images/tech-bar.jpg" alt="A tablet" class="carousel-element">
        <img src="./images/tech-laptop.jpg" alt="A laptop" class="carousel-element">
        <img src="./images/tech-phone.jpg" alt="A laptop" class="carousel-element">
        <img src="./images/arrow-right.svg" alt="A right arrow" class="carousel-button next-button">
    </div>
    </div>
    <div class="carousel-container carousel-container--two">
        <div class="track">
        <img src="./images/arrow-left.svg" alt="A left arrow" class="carousel-button prev-button">
        <img src="./images/winter-ski.jpg" alt="A tablet" class="carousel-element">
        <img src="./images/winter-hands.jpg" alt="A laptop" class="carousel-element">
        <img src="./images/winter-people.jpg" alt="A laptop" class="carousel-element">
        <img src="./images/arrow-right.svg" alt="A right arrow" class="carousel-button next-button">
    </div>
    </div>
    <div class="carousel-container carousel-container--three">
        <div class="track">
        <img src="./images/arrow-left.svg" alt="A left arrow" class="carousel-button prev-button">
        <img src="./images/women-hairdryer.jpg" alt="A tablet" class="carousel-element">
        <img src="./images/women-handbag.jpg" alt="A laptop" class="carousel-element">
        <img src="./images/women-makeup.jpg" alt="A laptop" class="carousel-element">
        <img src="./images/arrow-right.svg" alt="A right arrow" class="carousel-button next-button">
    </div>
    </div>
</div>

CSS:

.carousel-wrapper {
    position: relative;
    width: 300vw;
    height: 35vh;
}

.carousel-container{
    margin-top: 5vh;
    position: absolute;
    width: 100vw;
    height: 30vh;
}

.track{
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}



.carousel-container--one{
    transform: translateX(0%);
    
}

.carousel-container--two{
    transform: translateX(100%);
}

.carousel-container--three{
    transform: translateX(200%);
}



.carousel-button {
    height: 4vh;
    z-index: 2;
    margin: auto 5px auto 5px; 
}



.prev-button{
    left: 2%;
}

.next-button{
    right: 2%;
}


.carousel-element{
    margin: auto 5px auto 5px;
    
}

Here's the carousel shown as working:

And here it fails: The pictures do not resize. Instead, once the viewport gets too narrow, the next carousel-container starts moving in from the right.