HTML和CSS：侧边栏购物车

我试图包装一个动态的购物车，并且当100%的高度时，物品容器（className='cart\u item\u container'）是可滚动的，因此我可以看到覆盖标题文本和关闭按钮。我希望标题文本和关闭按钮保持在原来的位置，并使项目容器可滚动，以便在滚动时可以看到我的所有项目

@导入url（'https://fonts.googleapis.com/css2?family=Kaushan+脚本&显示=swap'）；
* {
保证金：0；
填充：0；
大纲：0；
框大小：边框框；
盒影：无；
背景：透明；
字体系列：$鸬鹚；
颜色：#000；
}
身体{
宽度：100%；
身高：100%；
}
钮扣{
颜色：#000；
文本转换：大写；
盒影：无；
大纲：0；
边界：无；
填充：8px 15px；
边界半径：5px；
光标：指针；
}
.侧边栏\u覆盖\u购物车{
显示器：flex；
弯曲方向：行；
位置：绝对位置；
排名：0；
右：0；
宽度：50%；
最高高度：90%；
对齐项目：居中；
证明内容：中心；
z指数：-1；
不透明度：0；
背景：rgba（0,0,0,0）；
过渡：所有800毫秒的缓进缓出；
}
.sidebar\u overlay\u cart.fas{
颜色：#000；
字体大小：25px；
右边距：0.5em；
}
.侧边栏\u覆盖\u购物车。文本\u倾斜{
字体系列：“考山体”，草书；
}
.sidebar\u overlay\u cart.cart{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
间隙：2米；
填料：2米1米；
证明内容：中心；
宽度：100%；
身高：100%；
背景：#f1f5f8；
过渡性质：全部；
过渡时间：300ms；
不透明度：0；
}
.sidebar\u overlay\u cart.cart.cart\u标题{
宽度：100%；
保证金：3EM0；
放置项目：中心；
证明内容：中心；
文本对齐：居中；
}
.sidebar\u overlay\u cart.cart.cart\u标题h3{
文本转换：大写；
字体大小：25px；
字母间距：2px；
}
.sidebar\u overlay\u cart.cart.cart\u close{
字体大小：25px；
背景：透明；
位置：绝对位置；
顶部：0.5em；
右：0；
光标：指针；
}
.sidebar\u overlay\u cart.cart.cart\u close:hover.fas{
过渡：所有0.3s线性；
字体大小：30px；
颜色：#bb2525；
}
.sidebar\u overlay\u cart.cart.cart\u item\u container{
宽度：100%；
边缘顶部：1米；
身高：100%；
}
.sidebar\u overlay\u cart.cart.cart\u item\u container.cart\u item{
宽度：100%；
显示器：flex；
调整项目：灵活启动；
}
.sidebar\u overlay\u cart.cart.cart\u item\u container.cart\u item.item\u img\u container{
弹性系数：0.4；
}
.sidebar\u overlay\u cart.cart.cart\u item\u container.cart\u item.item\u img\u container.item\u img{
最大宽度：100%；
最大高度：10公分；
}
.sidebar\u overlay\u cart.cart.cart\u item\u container.cart\u item.item\u info\u container{
弹性系数：0.5；
填充物：0.5em 1em；
}
.sidebar\u overlay\u cart.cart.cart\u item\u container.empty\u cart{
字体大小：正常；
显示：网格；
文本对齐：居中；
字体大小：20px；
}
.sidebar\u overlay\u cart.cart\u item\u inc\u dec\u btn\u容器{
flex:0.1；
文本对齐：居中；
放置项目：中心；
证明内容：中心；
}
.sidebar\u overlay\u cart.cart\u item\u inc\u dec\u btn\u container.cart\u item\u数量{
文本对齐：居中；
线高：1；
保证金：0自动；
左侧填充：5px；
}
.sidebar_overlay_cart.cart.cart_item_inc_dec_btn_container.cart_item_address_btn、.sidebar_overlay_cart.cart.cart_item_inc_dec_btn_container.cart_item减少_btn{
宽度：100%；
文本对齐：居中；
放置项目：中心；
证明内容：中心；
光标：指针；
字号：0.85em；
填充：0.25em 0.25em 0.25em；
}
.sidebar_overlay_cart.cart.cart_item_inc_dec_btn_container.cart_item_address_btn i、.sidebar_overlay_cart.cart.cart_item_inc_dec_btn_container.cart_item减少_btn i{
宽度：100%；
保证金：0自动；
}
.sidebar\u overlay\u cart.cart.cart\u item\u inc\u dec\u btn\u container.cart\u item\u address\u btn:hover.fas、.sidebar\u overlay\u cart.cart\u item\u inc\u dec\u btn\u container.cart\u item\u dec\u btn\u dec\u btn\u container.cart\u减少\u btn:hover.fas{
颜色：rgba（208,41,0,0.91）；
}
.sidebar\u overlay\u cart.cart页脚{
边框顶部：1px实心#000；
宽度：95%；
填充：1.5em 0；
字体系列：“考山体”，草书；
字母间距：2px；
文本对齐：居中；
}
.sidebar\u overlay\u cart.cart footer.cart\u item\u总计{
宽度：自动；
字体家族：继承；
}
.sidebar\u overlay\u cart.cart.checkout\u btn\u容器{
宽度：95%；
填充：0；
文本对齐：居中；
}
.sidebar\u overlay\u cart.cart.checkout\u btn\u容器按钮{
填充：10px；
宽度：80%；
颜色：#fff；
背景：rgba（0,0,0,8）；
}
.sidebar\u overlay\u cart.cart.cart\u空{
显示：无；
}
.sidebar\u overlay\u cart.show{
显示器：flex；
不透明度：1；
z指数：10；
}
.sidebar\u overlay\u cart.show.cart{
不透明度：1；
}
.sidebar\u overlay\u cart.show.cart*{
颜色：#000；
}

购物袋
iPad
12.12美元
去除
1

三星S20
12.12美元
去除