Image wider than flex-viewport after making thumbnails vertical – Woocommerce

I’ve a problem with image size in Woocommerce and FlexSlider product gallery.

I’m using a free Astra theme. I’ve found the code that makes the thumbnail vertical on the left side of product image.

.woocommerce-product-gallery {
    display: flex;
}

.woocommerce-product-gallery .flex-control-thumbs {
    order: -10;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100%;
}

Now thumbnails looks OK on the left side.

But here is the problem. Image (now on the right of the thumbnails) is not fully visible.

The image is shown in div.flex-viewport:

<div class="flex-viewport" style="overflow: hidden; position: relative; height: 554.45px;">

    <figure class="woocommerce-product-gallery__wrapper" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

        <div class="woocommerce-product-gallery__image flex-active-slide" data-thumb="http://localhost/site01/wp-content/uploads/prod01.jpg" data-thumb-alt="" style="position: relative; overflow: hidden; width: 554.45px; margin-right: 0px; float: left; display: block;" </div>

When I inspect element it is wider than first element .

It is wider because now thumbnails take some space on the left. The flex-viewport is now narrower than it was but the image has the same width like was when thumbnails was under the active product image.

I"ve figure out that when I change the width in above from 1000% to 100% and change the width in the last div auto, image is shown correctly. But because I’ve changed 1000% to 100% other images in the gallery are not shown when I click on the thumbnail. It is shown as blank space.

So I need to get active slide have the same width as flex-viewport (child have the same width as grandparent, not as parent).

I’ve been trying to solve this for a while with no luck.

Can somebody help me this?

Regards….