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

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](https://streamable.com/135c8e)

Any help would be appreciated!

HTML:
```

Software
Used

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.

Start by reproducing the behavior from the provided HTML, CSS, and Flickity initialization snippet, paying attention to the hidden .sub-work-container and the resize-related calls. Confirm that all five .gfx-work-cell elements slide correctly on initial load and that resizing is no longer required for the layout to recover.

Written by the indexing model from the issue text.