老师好！如下图，我为画红圈的products_wrapper部分设置了绝对定位，想使商品列表里的商品大于3项时能够在列表的垂直方向出现滚动条，向下滚动以查看更多商品。

这个功能我自己已经实现了，但是这也导致了一个问题：因为products_wrapper这里我设置了绝对定位，脱离了标准文档流，导致它的父元素，也就是下方截图里的cart元素，出现了高度塌陷。本来cart的高度应该是包含products_wrapper的高度的，但是现在只剩下了cart__title部分的高度。

这也对后面的布局产生了影响。由于cart高度塌陷，导致后面的cart跑上去和前面的重叠了，如下图所示。

我自己尝试了给products_wrapper添加高度，清除浮动等，但发现都无法解决问题，只有去掉这一步部分的绝对定位才可以，但这样就无法实现购物车里商品大于3项时通过上下滚动查看全部商品的功能了。想问下老师有什么好的解决办法吗？谢谢~

相关代码：以下为这一页面的HTML和CSS代码：

HTML

<template>
    <div class="top">我的全部购物车（2）</div>
    <div class="wrapper">
        <ul class="cartList">
            <li class="cart" >
                <div class="cart__title">沃尔玛</div>
                <div class="products__wrapper">
                    <ul class="products">
                        <li class="products__item" >
                            <img src="http://www.dell-lee.com/imgs/vue3/tomato.png" class="item__img">
                            <div class="item__text">
                                <h4 class="item__text__title">番茄250g/份</h4>
                                <div class="item__text__prices">
                                    ¥<span class="item__text__prices__cur">33.6 x 3</span>
                                </div>
                                <div class="item__text__totalPrice">
                                    <span class="item__text__totalPrice__icon">¥</span>
                                    <span class="item__text__totalPrice__num">99.9</span>
                                </div>
                            </div>
                        </li>
                        <li class="products__item" >
                            <img src="http://www.dell-lee.com/imgs/vue3/tomato.png" class="item__img">
                            <div class="item__text">
                                <h4 class="item__text__title">番茄250g/份</h4>
                                <div class="item__text__prices">
                                    ¥<span class="item__text__prices__cur">33.6 x 3</span>
                                </div>
                                <div class="item__text__totalPrice">
                                    <span class="item__text__totalPrice__icon">¥</span>
                                    <span class="item__text__totalPrice__num">99.9</span>
                                </div>
                            </div>
                        </li>
                        <!-- 当商品多于2项时出现的下拉菜单 -->
                        <li class="dropDownMenu" >
                            <span class="dropDownMenu__text">共计3件/1.5kg</span>
                            <span class="dropDownMenu__arrow iconfont icon-back"></span>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <!-- 底部标签栏，公用组件 -->
    <Tabbar :curIndex="1" />
</template>

CSS：

<style lang="scss" scoped>
    @import '../../style/variables.scss';
    @import '../../style/mixins.scss';
    .top {
        background-color: $bgColor-white;
        height: .44rem;
        line-height: .44rem;
        text-align: center;
        font-size: .16rem;
        color: $content-fontcolor;
    }
    .wrapper {
        position: absolute;
        left: 0;
        right: 0;
        top: .44rem;
        bottom: .49rem;
        overflow-y: scroll;
        padding: 0 .18rem;
        background-color: $searchbox-bgColor;
    }

    .cartList {
        padding-top: .16rem;

        .cart {
            margin-bottom: .16rem;
            border-radius: .04rem;
            background: $bgColor-white;
            padding: .16rem;
            position: relative;
           
   
            &__title {
                font-size: .16rem;
                color: $content-fontcolor;
                font-weight: bold;
            }

   
            .products__wrapper {
                overflow-y: scroll;
                position: absolute;
                top: .53rem;
                left: 0;
                right: 0;
                height: 2.32rem;
            }

            .products {
                padding: 0 .16rem .08rem .16rem;
                background: $bgColor-white;
   
                &__item {
                    display: flex;
                    height: .46rem;
                    align-items: center;
                    padding: .08rem 0;
   
                    .item__img {
                        display: block;
                        width: .46rem;
                        height: .46rem;
                        margin-right: .16rem;
                    }
                    .item__text {
                        flex: 1;
                        // 防止商品名称过长时水平方向滚动条的出现
                        overflow: hidden;
                        box-sizing: border-box;
                        position: relative;
                        &__title {
                            font-size: .14rem;
                            color: $content-fontcolor;
                            font-weight: bold;
                            // 单行文字省略
                            @include ellipsis;
                        }
                        &__prices {
                            color: $fontColor-red;
                            margin-top: .06rem;
                            font-size: .1rem;
                            &__cur {
                                font-size: .14rem;
                                line-height: .2rem;
                            }
                        }
                        &__totalPrice {
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            color: $black;
                            &__icon {
                                font-size: .1rem;
                            }
                            &__num {
                                font-size: .14rem;
                                line-height: .2rem;
                            }
                        }
                    }
                }
   
                .dropDownMenu {
                    background: $searchbox-bgColor;
                    height: .28rem;
                    font-size: .14rem;
                    color: $light-grey;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: .08rem 0;
   
                    &__text {
                        display: inline-block;
                        margin-right: .08rem;
                    }
   
                    &__arrow {
                        display: inline-block;
                        transform: rotate(270deg);
                        font-size: .2rem;
                        position: relative;
                        top: .01rem;
                    }
                }
            }
        }
    }

</style>