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.

Html5 html css

Apr.14,2021

add a padding value to the wrapper

Previous: MYSQL Import Datagram error

Next: The question of Mini Program's Modularization

What fullpage plug-in with arrows and dot navigation
as shown in the red box of the second picture, is there any recommendation for this plug-in? Thank you. the screenshot is uploaded, so let s just look at it. nothing can be found in vueawesome. ...

Vue.js html5 html css

Feb.26,2021
On the problem of element movement in canvas
A picture grows slowly when it slides up to a certain extent. Why does it bring out a line that has been entangled all night? I can t find the reason. ...

Html5 html css javascript

Feb.26,2021
The string is concatenated, the string becomes numeric and added, and the string is converted into numeric value.
my Q starts from scratch, but I want him to write ti+= < p claqss= "title-count " > has answered 8 questions + Q claqss= "title-count " > answered 1 question correctly; wrote like this: ti+= < p claqss= "title-count " > answered 8 questions + Q...

Html5 html css javascript

Feb.27,2021
How to bind each row of data to a jqgrid click event
try the events and methods of jqgrid api, are useless, ask the boss what good methods are available ...

Php html5 html css javascript

Feb.27,2021
How to disable the drop-down and refresh of mobile phone chrom
the new project found that testing the drop-down on chrome will refresh the page look at Mobile Taobao s implementation of the drop-down and do not know how to achieve it ...

Sass html5 html css javascript

Feb.27,2021
How does WeChat Mini Programs implement the step-by-step bar or who has used it in his project?
...

Html5 html css javascript

Feb.27,2021
Will the use of font-family in the pc page css cause font infringement?
does the use of font-family in the pc page css cause font infringement ...

Html5 html css3 css web

Feb.28,2021
How to make js execute repeatedly
I found a js code from the Internet to calculate the time difference effect is that we have been together xx days xx xx minutes xx seconds problem is that this time will not change only enter the web page after refreshing to keep the same value so I...

Javascript html5 html css

Feb.28,2021
How does webapp solve the problem of resolution compatibility? Is there any way to learn from Android to solve the resolution problem, and why not?
recently read the front-end https: www.w3cplus.com mobil. this article, feel very troublesome, why not learn Android ...

Vue.js html5 html css javascript

Feb.28,2021
Ajax redirect problem
Why does the problem of redirection occur when using ajax to request other websites $.ajax({ url:"https: www.baidu.com", type: GET , headers:{ Access-Control-Allow-Origin : * ...

Html5 html css javascript

Feb.28,2021
I would like to ask canvas to draw multiple small balls that collide with each other, how to add events to each small ball?
canvas draws multiple ball collisions on the canvas. How can I add a click event to the ball? as far as I know, adding an event to the canvas actually gets an area on the canvas to fix an event? Is it true that the ball can not be added if it keeps ch...

Canvas html5 html css javascript

Feb.28,2021
If you want to implement the element-ui DatePicker date selector, you can only choose within 7 days.
demand is 1: 15 days after the current time is banned, 2: the date range can only be within 7 days. If the start time is the 2nd, the end time cannot be greater than the 8th, and the rest display mouse display is disabled . have you ever done it, ...

Node.js html5 html css javascript

Feb.28,2021
How to upload and preview a single image in react
how to upload a preview of a single image in react. For mobile, ant design is used. mobile framework is just a novice, can give a specific code ...

Html5 html css php javascript

Mar.01,2021
After you change the scroll bar style, the default scroll bar area width cannot be canceled
figure 1 shows the effect of modifying the scroll bar style code in figure 2 , but you can see that there is still a color area on the left that is the default width of the scroll bar excuse me, how to cancel this part ...

Html5 html css3 css

Mar.01,2021
How to use the react ant design mobile form and how to get the data to report an error
submit=(e)=>{ e.preventDefault(); let value=this.props.form.getFieldValue( key )+this.props.from.getFieldValue( replytext ); alert(value); } render() { const { getFieldProps } = this.props.form; ret...

Html5 html css php javascript

Mar.02,2021
Routing parameters cannot be obtained in react
routing: < Route path= " datareport :name " component= {ReportIndex} > < Route > ; receive: `componentWillMount () { document.title=""+this.props.params.name; }` access: Why does http: localhost:3000 datareport 3 make an error sayi...

Html5 html css php javascript

Mar.02,2021
Does floating also have priority?
Yes, it s me again, the one who made the lowest mistake last time. The problem is this: wants to put two vertical bars in the middle of the three a tags, like the navigation bar. After I set the style, I found that the two bars that act as vertical ...

Html5 html css

Mar.02,2021
Compatibility of Xiaomi browser and uc mobile browser
compatibility of Xiaomi browser and uc mobile browser is shown in figure ,uc,uc, . css .price {font-size:22px;color:-sharpF79200;text-align:center;width:90px;margin:0 auto;height:30px;position:relative;padding-left:6px;} .pricon {width:16px;height:...

Sass html5 html css

Mar.02,2021
How to build dva and how to use ant design mobile in it
dva creates a project, what are the specific functions of those configuration files how to use ant design mobile in it ...

Html5 html css php javascript

Mar.02,2021
How to animate when css div pops up from the bottom screen and the mask is placed in a div
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=...

Sass html5 html css javascript

Mar.02,2021