Main flickity div not sliding the image cell elements correctly until window resize

[HarjjotSinghh]

So, basically I have a div gfx-flickity inisde which there are 5 gfx-work-cell elements. When the Flickity div is initialized, its slider is not working properly, i.e. it is not transforming the gfx-work-cell elements correctly on the X axis and is transforming too less than what its supposed to.

For example: flickity-slider should apply: transform: translateX(30%) on the first slide animation, but instead it is applying transform: translateX(20%).

This is causing the 4th and 5th element in my flickity div to disappear in the slideshow.

BUT When I resize the window, or zoom in/out, the issue gets resolved automatically.

Video demonstrating the issue: Streamable Link

Any help would be appreciated!

HTML:

                            <div class="sub-work-container" style="display: none;">
                                <div class="gfx-flickity">
                                    <div class="gfx-work-cell">
                                        <img draggable="false" src="./assets/images/2D-Logos.png" alt="">
                                    </div>
                                    <div class="gfx-work-cell">
                                        <img draggable="false" src="./assets/images/3D-Logos.png" alt="">
                                    </div>
                                    <div class="gfx-work-cell">
                                        <img draggable="false" src="./assets/images/Banners-Posters.png" alt="">
                                    </div>
                                    <div class="gfx-work-cell">
                                        <img draggable="false" src="./assets/images/Twitter-Headers.png" alt="">
                                    </div>
                                    <div class="gfx-work-cell">
                                        <img draggable="false" src="./assets/images/YouTube-Banners.png" alt="">
                                    </div>

                                </div>
                                <div class="graphics-designing-skills">
                                    <h2 class="sub-skills-text text">Software<br>Used</h2>
                                    <div class="gfx-skills-logos">
                                        <img class="skill-icon" draggable="false" src="./assets/svgs/photoshop.svg" alt="">
                                        <img class="skill-icon" draggable="false" src="./assets/svgs/illustrator.svg" alt="">
                                        <img class="skill-icon" draggable="false" src="./assets/svgs/lightroom.svg" alt="">
                                        <img class="skill-icon" style="transform: scale(0.8);" draggable="false" src="./assets/svgs/blender.svg" alt="">
                                    </div>
                                </div>
                            </div>

CSS:

.sub-work-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.gfx-flickity {
    width: 100%;
    height: 100% !important;
    border-radius: 25px;
}

.graphics-designing-skills {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    width: 25%;
    height: 100%;
}

.sub-skills-text {
    font-size: 40px;
    font-family: 'Manrope', sans-serif;
    color: rgb(251, 251, 251);
    font-weight: 900;
    text-align: center;

}

.gfx-skills-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.skill-icon {
    width: 60px;
    height: 60px;
    opacity: 1;
    border-radius: 10px;
}

.gfx-work-cell {
    margin-right: 5px;
    padding: 5px;
    height: 100% !important;
    width: auto;
    /* background: white; */

}

.gfx-work-cell img {
    height: 100%;
    width: auto;
    border-radius: 50px;
}

.flickity-page-dots {
    bottom: 2% !important;
}

.flickity-viewport {
    height: 100% !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    border: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.flickity-slider {
    width: 100% !important;
    height: 100% !important;
}

JavaScript:

var gfxWorkContainer = document.querySelector(".gfx-flickity");
gfxFlickity = new Flickity(gfxWorkContainer, {
                    cellAlign: 'center',
                    contain: true,
                    wrapAround: true,
                    imagesLoaded: true,
                    autoPlay: 2000,
                    pageDots: false,
                    setGallerySize: false,
                    percentPosition: true
                });
gfxWorkContainer.addEventListener('autoplayStart', function() {
            gfxFlickity.resize();
        });
gfxWorkContainer.style.height = gfxWorkContainer.clientHeight + "px";

Let me know if any code snippet is missing or if any extra code is needed.