为什么这里的margin没撑开

<template>
<div class="wrapper">
    <div class="title">我的全部购物车</div>
    <div class="carts">
        <div
        class="cart"
        v-for="(cart,key) in cartList"
        :key = key
        >
            <div class="cart__title">{{cart.shopName}}</div>
            <div class="cart__list">
                <template
                v-for="(product,innerIndex) in cart.productList"
                :key="innerIndex">
                    <div
                    class="cart__item"
                    >
                        <img :src="product.imgUrl" class="cart__item__img">
                        <div class="cart__item__detail">
                            <h4 class="cart__item__title">{{product.name}}</h4>
                            <p class="cart__item__price">
                              <span class="cart__item__single">
                                <span class="cart__item__price__yen">¥</span>{{product.price}} x {{product.count}}
                              </span>
                              <span class="cart__item__total">
                                <span class="cart__item__price__yen">¥</span>{{(product.price*product.count).toFixed(2)}}
                              </span>
                            </p>
                        </div>
                    </div>
                </template>
            </div>
            <div class="cart__total">共计{{cart.total}}件</div>
        </div>
    </div>
</div>
<Docker :currentIndex="1"/>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import Docker from '../../components/Docker.vue'
export default {
  components: { Docker },
  name: 'CartList',
  setup () {
    // const store = useStore()
    const cartList = JSON.parse(localStorage.cartList || '{}')
    for (const i in cartList) {
      const cart = cartList[i]
      // console.log(cart)
      let total = 0
      for (const j in cart.productList) {
        const product = cart.productList[j]
        total += product.count
      }
      cart.total = total
      console.log(cart)
    }
    return { cartList }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/variables.scss';
@import '../../style/mixins.scss';
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  color: $content-fontcolor;
  overflow-y:auto ;
  background-color: #eee;
}
.title {
    line-height: .22rem;
    font-size: .16rem;
    color: #333333;
    text-align: center;
    background-color: #fff;
    padding: .11rem 0;
}

.carts {
  margin: 0 .18rem .2rem .18rem;
  position: absolute;
  top: .60rem;
  left: 0;
  right: 0;
   .cart {
    //  overflow-y:scroll ;
     margin-bottom: .16rem;
     background-color: #fff;
    //  padding-bottom: .16rem;
     &__list {
         overflow-y: scroll;
         background-color: $white-fontColor;
     }
     &__title {
       font-size: .14rem;
       line-height: .22rem;
       color: $content-fontcolor;
       padding: .16rem;
         background-color: $white-fontColor;
     }
     &__item {
           position: relative;
           display: flex;
           padding-bottom: .16rem;
           margin: 0 .16rem;
           &__img {
               width: .46rem;
               height: .46rem;
               margin-right: .16rem;
           }
           &__title {
               line-height: .2rem;
               font-size: .14rem;
               color: $content-fontcolor;
               margin: 0;
               @include ellipsis;
           }
           &__detail {
               overflow: hidden;
               flex: 1;
           }
           &__price {
               line-height: .2rem;
               font-size: .14rem;
               color: $hignlight-fontColor;
               margin: .06rem 0 0 0;
               display: flex;
               &__yen {
                   font-size: .12rem;
               }
           }
           &__total {
             flex: 1;
             text-align: right;
             color: #000;
           }
       }
     &__total {
      line-height: .28rem;
      text-align: center;
      font-size: 14px;
      color: #999999;
      background-color: #f5f5f5;
      margin: 0 .16rem .16rem .16rem;
     }
   }
}

</style>

相关截图：