Two rows (flex), the bottom with fixed height, the top to take the rest of space BUT show scrollbar on small screens

Question

Is there an easy way to accomplish such things?

In the top section will be shown cart products, and the number varies obviously, in the bottom section there will be Membership info with a button, total price of the cart, and the two buttons. The bottom section could be fixed because I might know the exact pixel number - of course floating would be ideal.

I tried to make the bottom section sticky but it didn't do any good.

I have this code that works on desktop and bigger phones but it breaks when I resize the viewport to really small size:

<div class="cart_wrapper">
    <div class="mini_cart_info_wrapper">
        <ul class="woocommerce-mini-cart">
        </ul>
    </div>

    <div class="price_buttons_area">
        <div class="mini_cart_membership_info">
        </div>

        <p class="woocommerce-mini-cart__total total">
        </p>

        <p class="woocommerce-mini-cart__buttons buttons">
            <?php do_action( 'woocommerce_widget_shopping_cart_buttons' ); ?>
        </p>
    </div>
</div>

and the CSS:

    .cart_wrapper {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;

        .mini_cart_info_wrapper {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: auto;
            align-content: stretch;
            flex: 1 1 auto;
        }

        .price_buttons_area {
            flex: 0 1 auto;

            > .mini_cart_membership_info {
                padding: 20px;
                flex: 0 1 auto;

                > p {
                    margin-bottom: 20px;
                }
            }
        }
    }

Answer 1

I solved the issue by adding max-height: 50% to the top section and min-height: 50% to the bottom section.

Not a greatest solution but it works.