full screen entry image ratio is wrong

I have a slider with images of different widths and heights and I have borrowed from the Flickity options example for fullscreen image carousels centered in cells the CSS. I have:

```
carousel {
background: #EEE;
}

.carousel-cell {
min-height: 100%;
}

.carousel.is-fullscreen .carousel-cell {
height: 100%;
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.carousel.is-fullscreen .carousel-cell-image {
height: 100%;
max-width: 100%;
}

.carousel-cell-image {
display: block;
margin-right: 5px;
}
```

The fullscreen slider works on Chrome on an old IOS iPad, Firefox on Windows 10 and FreeBSD, Edge on Windows 10 however and fails on a recent IOS with Chrome, Safari and Brave, Sarfari on MacOS, and Chrome on Windows. The images do not display when entering fullscreen with an incorrect aspect ratio as if the normal size is being used. The images are too narrow for the height. If I resize the browser while in fullscreen with Safari on MacOS all images are displayed correctly and stay that way. On Window's Chrome if I toggle `display: flex;` off then on in Chrome's inspector for the `.carousel.is-fullscreen .carousel-cell` all images are displayed correctly.