When you use flex box to make a horizontal card scroll bar, the box-shadow shadow of the last card is trimmed.

as mentioned, the shadow of the last card is trimmed

when making the card scroll bar as shown in the following figure.
.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;
}

I have tried to set the outer margin of margin in wrapper class to no avail, and it is not effective to set the inner margin padding after setting a large container including wrapper. I would like to ask you what the problem is.

Apr.14,2021

add a padding value to the wrapper

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b45b-2c272.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b45b-2c272.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?