Flickity Viewport height not consistent and too small until window resize

I have a slider, and flickity is inside that slider. 6 slides in total, the first 4 slides load fine mostly, the last 2 load as viewport-height 25px until the window is resized then the viewport-height readjusts to the full image size in it as intended.

Current options are as follows:
jQuery(document).ready(function($){
$('.main-carousel').flickity({
// options
cellAlign: 'left',
imagesLoaded: true,
setGallerySize: true,
contain: true
});
});

I tried adaptiveHeight and other options but nothing worked. Tried one solution in another post where adding padding-top: x% then margin-top: -x% and didn't work.

Also, this happens on first load 100% of the time, but after that it happens randomly sometimes yes sometimes no.

Any ideas appreciated. Thanks.

Start from the jQuery(document).ready initialization of .main-carousel and reproduce the six-slide case with imagesLoaded and setGallerySize enabled. Check why the final slides produce a 25px viewport before window resize; done means the viewport reaches the intended image height on first load without requiring a resize.

Written by the indexing model from the issue text.