The elements are nested like this.

<div class = "root">
 <div class = "mask"></div>
 <div class = "a"></div>
 <div class = "b"></div>
 <div class = "c"></div>
</div>`

Is it possible to set a specific margin only for the mask div?

For example, if the root width is 300px, can I have a shorter width than that for the mask div?

Shimmer is over lapping

Inside the mask row there is a table which contains the shimmer div and the width of the shimmer which caused it to overlap over the scrollbar. Is it possible to correct this issue?

CodePudding user response：

I dont understand exactly what you want, but here are some tips: you can set overflow hidden on .root div, so overflow will be hidden and display:flex, so if

.root{
overflow: hidden;
display:flex;
}

if a child element of .mask is overflowing it, do same on .mask. if you want clearer answer, ask clearer question.

CodePudding user response：

 ::before,
::after {
  box-sizing: border-box;
}

add this style

CodePudding user response：

just try this i hope it helps

.mask{
overflow:hidden;
//now giv here margin left according to your need or just give margin
}