'Horizontall scrolling div shadow does not cover the child background

I have horizontal scrolling container, that contains child´s with background-color. I tried to add shadow but its not working for ovarlay child background. Z-index didn't help me in this case.

There is any way to achieve this?

.container {
    overflow-x: auto;
    background-image: linear-gradient(to right,white,white),linear-gradient(to right,white,white), linear-gradient(to right,rgba(0,0,0,0.25),rgba(255,255,255,0)), linear-gradient(to left,rgba(0,0,0,0.25),rgba(255,255,255,0));
    background-position: left center,right center,left center,right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%,20px 100%,20px 100%,20px 100%;
    background-attachment: local,local,scroll,scroll;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--theme-padding-sm);
    border-radius: var(--theme-radius); 
    justify-content: center;
    width: var(--theme-width-md);;
    height: var(--theme-height-md);
    background: var(--topic-tag-background);
    border: 2px solid transparent;
   
}
<div class="container">
 <a>
  <div class="tag-container">
   <div class="tag">
    <span>BO</span>
   </div>
  </div>
 </a>
</div>

expected result

cssscrollbackgroundshadow


Solution 1:[1]

Just an idea, you can work around to achieve your desired result. But if you create an ::after pseudoselector to place your shadow (in this case I've included a gradient because is more flexible than an image) you can manage it better.

.container  {
    position: relative;
    width: 150px;
}

.container::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 100%;
    top: 0;
    right: 0;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4682247899159664) 100%);
}

.container-overflow {
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
}

.tag-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.tag {
    padding: 0 var(--theme-padding-sm);
    border-radius: var(--theme-radius); 
    justify-content: center;
    width: var(--theme-width-md);;
    height: var(--theme-height-md);
    background: var(--topic-tag-background);
    border: 2px solid transparent;
}
<div class="container">
    <div class="container-overflow">
        <div class="tag-container">
            <a href="" class="tag">
                <span>BO</span>
            </a>
            <a href="" class="tag">
                <span>BO</span>
            </a>
            <a href="" class="tag">
                <span>BO</span>
            </a>
            <a href="" class="tag">
                <span>BO</span>
            </a>
            <a href="" class="tag">
                <span>BO</span>
            </a>
            <a href="" class="tag">
                <span>BO</span>
            </a>
            <a href="" class="tag">
                <span>BO</span>
            </a>
            <a href="" class="tag">
                <span>BO</span>
            </a>
            <a href="" class="tag">
                <span>BO</span>
            </a>
        </div>
    </div>
 </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Toni Bordoy

Related Questions