Adjusting the height of a card dynamically in HTMLCSS - Stack Overflow

I have a card that opens from the bottom on mobile, it takes a specific height depending on the screen. The problem is that the contents of this card might be cut off if the screen is too narrow and tall. I tried multiple solutions, but up until now, it may be visible on some devices, and not in others (especially iOS devices).

@media (max-width: 1025px) {
.card.open {
    height: auto; /* Allow content to determine height */
    min-height: 75vh; /* Minimum height to ensure good UX when opening */
    max-height: 85vh; /* Prevent from taking full screen */
    bottom: 0;
    padding-bottom: 60px; /* Space for the fixed bottom button */
  }

  .button-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 16px;
    z-index: 999;
  }

  /* Handle iOS safe area */
  @supports (padding: max(0px)) {
    .card.open {
      padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
    
    .button-container {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
  }

<div class="dishes-prices card">
    <img src="{% static 'img/arrow_forward.svg' %}" alt="arrow forward" id="arrow-img">
    <div class="address-resume">
        <div class="resume-headlines">
            <img src="{% static 'img/where_to_vote.svg' %}" alt="where to vote icon" id="">
            <h2>Adresse</h2>
        </div>
        <p>{{ address }}</p>
    </div>

    <span></span>

    <div class="formula-resume">
        <div class="resume-headlines">
            <img src="{% static 'img/shopping_bug.svg' %}" alt="shopping bug icon" id="">
            <h2>Ma formule</h2>
        </div>
        <ul>
            <li>
                <p>{{ dishes_per_week }} plats par semaine</p>
                <span>{{ service_price_before_no00 }}€</span>
            </li>
            <li>
                <p>{{ ppl }} personnes</p>
                <span></span>
            </li>
            {% if suivi_price %}
            <li>
                <p>Un suivi nutritionnel</p>
                <span>{{ suivi_price }}€</span>
            </li>
            {% endif %}
        </ul>
        <div class="formula-note-1">
            <div>
                <p>Crédit d'impôt (-50%)</p>
                <a href="#" id="open-credit-impot-modal"><img src="{% static 'img/info_icon.svg' %}" alt="info icon" id=""></a>
            </div>
            <span>{{ reimbursment }}€</span>
        </div>
        <div class="formula-note-2"><p>Prix par plat après Crédit d'Impôt</p><span>{{ price_per_dish }}€</span></div>
    </div>
    <span></span>
    <div class="dishes-resume">
        <div class="resume-headlines">
            <img src="{% static 'img/patch_cooking.svg' %}" alt="shopping bug icon" id="">
            <h2>Vos plats</h2>
        </div>
        <div class="dishes-resume-info-1">
            <p>Plats sélectionnés</p>
            <span id="plats-selectionnes">0/{{ dishes_per_week }}</span>
        </div>
        <div class="dishes-resume-info-2" style="{% if not include_courses %}display:none;{% endif %}">
            <p>Estimation des courses</p>
            <span id="estimation-courses">0€</span>
        </div>
    </div>


    <span></span>

    <div class="total-resume first-order">
        <div class=""><p>Total à avancer aujourd'hui</p><span id="total-a-avancer">0€</span></div>
        <div class=""><p>Prix après crédit d'impôt</p><span id="prix-apres-credit">0€</span></div>
        <span id="ecom">Économisez {{ reimbursment }}€</span>
    </div>
</div>