使用flex box制作水平方向卡片滚动栏时，最后一张卡片的box-shadow阴影被裁切

Question

如题，在制作如下图所示的卡片滚动栏时，最后一张卡片的阴影被裁切

.wrapper{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: nowrap;
    height: 220px;
    margin-right: 10px;
}
.card{
    flex: 0 0 auto;
    width: 300px;
    height: 200px;
    box-shadow: var(--light-shadow);
    border-radius: 8px;
    margin:10px;
}

尝试过wrapper class中设置margin外边距无果，另外设置一个大的container包括wrapper后设置内边距padding也无效，特向各位请教问题所在。

Answer 1

给wrapper左右添加一个padding值