Why max-height property doesn't work on iPhone

Question

I have a problem with iPhone on this page

In dev tools, everything works fine. But when someone tries to open it on iPhone, product item images complete page height. I've already tried setting max-height property in % and px but it's not working.

this is what we can see when visit site by iPhone

Thank you!

@media screen and (max-width: 997px) {
.display-plate {
    justify-content: space-between;

    .product-item {
        max-width: 191px;
        margin-right: 0 !important;
        height: 261px;
        margin-bottom: 32px;

        &:hover {
            height: auto;
        }

        .product-index-content {
            height: 75px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .product-index-caption {
                height: auto;

                .product-index-description {
                    display: none;
                }
            }

            .button-group {
                margin-top: 0;
                align-items: flex-end;

                .price-container {
                    .product-index-price-old {
                        margin-bottom: 5px;
                    }
                }

                .button-container {
                    margin-bottom: 4px;
                }
            }
        }
    }
}}

@media screen and (max-width: 576px) {
    .product-item {
        flex-basis: auto;
        width: 43vw;
        min-width: 136px;
        height: 194px;

        &:hover {
            .product-index-content {
                padding: 0;
            }
        }

        .product-index-image {
            height: 136px;
            width: 100%;
            min-width: auto;

            img {
                max-width: 100%;
                max-height: 100%;
                width: auto !important;
                height: auto !important;
            }
        }


        .product-index-content {
            height: 60px;

            .button-group {
                .price-container {
                    .product-index-price-old {
                        margin-bottom: 2px;
                    }
                }
            }

            .product-index-caption {
                .product-index-name {
                    font-size: 14px;
                    line-height: 18px;
                }
            }
        }
}}


<div class="row m-0">
      <div class="products-container display-plate d-flex flex-wrap col-12 p-0">
          @forelse ($products as $product)
              <div class="product-item">
                 <div data-alt_image="" data-product-id="{{ $product->id }}" class="product-index-image flex-column justify-content-center d-flex">
                      <a class="d-flex" href="{{ route('product.show', array_merge(['product_id' => $product->id, 'slug' => Str::slug($product->name, '-')], app('request')->all())) }}">
                            <img src="{{ Helper::resize($product->image, 'large')  }}" alt="{{ $product->name }}" class="img-fluid">
                       </a>
                  </div>
                  <div class="product-index-content">
                      <div class="product-index-caption">
                          <a href="{{ route('product.show', array_merge(['product_id' => $product->id, 'slug' => Str::slug($product->name, '-')], app('request')->all())) }}">
                              <span class="product-index-name">{!! $product->name !!}</span>
                           </a>

                           <div class="product-index-description">
                                            {!! Helper::description($product->description) !!}
                           </div>
                    </div>
                    <div class="button-group d-flex justify-content-between">
                        @if (!empty(Auth::user()->customer_group_id) || !empty($product->discount))
                          <div class="d-flex justify-content-between price-container flex-wrap">
                              <span class="product-index-price-discount">
                                  @if(!empty($product->action) && $product->action == '=')
                                     {{ Helper::price($product->price ?? $product->product_price, $product->discount ?? true) }} {{ session('currency_code') ?? $product->currency_code }}
                                  @else
                                    {{ Helper::price($product->product_price, $product->discount ?? true, $product->price) }} {{ session('currency_code') ?? $product->currency_code }}
                                  @endif
                              </span>
                              <span class="product-index-price-old align-self-start">
                                  @if(!empty($product->action) && $product->action == '=')
                                    {{ Helper::price($product->price ?? $product->product_price) }} {{ session('currency_code') ?? $product->currency_code }}
                                  @else
                                     {{ Helper::price($product->product_price, false , $product->price) }} {{ session('currency_code') ?? $product->currency_code }}
                                  @endif
                               </span>
                            </div>
                           @else
                             <span class="product-index-price">
                                @if(!empty($product->action) && $product->action == '=')
                                   {{ Helper::price($product->price ?? $product->product_price) }} {{ session('currency_code') ?? $product->currency_code }}
                                @else
                                   {{ Helper::price($product->product_price, false , $product->price) }} {{ session('currency_code') ?? $product->currency_code }}
                               @endif
                             </span>
                         @endif
                         <div class="button-container">
                             <a href="{{ route('product.show', array_merge(['product_id' => $product->id, 'slug' => Str::slug($product->name, '-')], app('request')->all())) }}" class="buy" data-product-id="{{ $product->id }}"
                                               data-size-id="{{ $product->product_option_id ?? '' }}"
                                               data-material-id="{{ $product->material_product_option_id ?? '' }}"
                                               data-color-id="{{ $product->color_product_option_id ?? '' }}"></a>
                      </div>
                   </div>
               </div>
          </div>
          @empty
              <p>{{ __('web.no_results') }}</p>
          @endforelse
     </div>
</div>