有没有一个简单的方法来完成这样的事情？
在顶部将显示购物车产品，和数量明显不同，在底部将有会员信息与一个按钮，购物车的总价，和两个按钮。底部部分可以固定，因为我可能知道确切的像素数-当然浮动将是理想的。
我试图使底部部分sticky，但它没有做任何好。
我有这样的代码可以在桌面和更大的手机上工作，但当我将视口大小调整到非常小的尺寸时，它会中断：

<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>

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;
                }
            }
        }
    }