Shadow is not taken into account when scrolling

Question

In the left part of the following picture you can see an object which has been positioned on the right edge of the container. Part of the object is cut off according to the overflow property and can be displayed by scrolling horizontally to the right.

In the right part of the picture you can see the object after scrolling to the right. The shadow on the right edge of the object is cut off. When scrolling, only the extent (width) of the object without the shadow was taken into account.

Setting a margin or padding value for the object did not change the behavior. Experiments with the css property scrolling-margin or scrolling-padding have also failed.

The behavior was tested under Chrome (79.0.3945.88), Opera and Edge in the latest versions under Mac OS.

I don't want to create another container around the object to create a space. Is there any other way to avoid cutting off the shadow?

---

The relevant CSS for the container:

margin: 4px;
box-sizing: border-box;
overflow: auto;

The relevant CSS for the object:

background: lightgreen;
background-clip: padding-box;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: darkslategray;
border-radius: 50%;
box-shadow: 2px 2px 4px gray;
position: absolute;

Answer 1

How about this. Put something in the ::after of the divs and position that slightly to the right.
It sounds like a bit of a kludge, but of all the things I tried, this is the only trick I could get to work.

 /* Change line 34 to see the beauty of flex-design ;-) */ body { width: 100vw; height: 100vh; margin: 0; background-color: white; overflow: hidden; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch; } nav { box-sizing: border-box; background-color: yellow; opacity: 0.9; display: flex; align-items: center; user-select: none; flex: 0 0 35px; padding: 5px; border-bottom: 4px solid #ddd; } main { box-sizing: border-box; flex: 1 1 auto; align-self: stretch; display: flex; flex-direction: row; /* row, row-reverse, column, column-reverse */ flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch; } article { --raster: 25px; --raster-color: #ddd; margin: 4px; box-sizing: border-box; overflow: scroll; background-attachment: local; background-image: linear-gradient(var(--raster-color) 1px, transparent 1px), linear-gradient(90deg, var(--raster-color) 1px, transparent 1px), linear-gradient(var(--raster-color) 0.5px, transparent 0.5px), linear-gradient(90deg, var(--raster-color) 0.5px, transparent 0.5px); background-size: var(--raster) var(--raster), var(--raster) var(--raster), 5px 5px, 5px 5px; flex: 3 1 75%; align-self: auto; position: relative; } section { box-sizing: border-box; background-color: #ddd; flex: 0 0 4px; cursor: col-resize; } aside { box-sizing: border-box; background-color: lightgray; overflow: scroll; flex: 1 1 calc(25% + 10px); /* resizing */ align-self: auto; margin: 4px; padding: 5px; } article div { position: absolute; border: 1px solid black; border-radius: 50%; box-shadow: 4px 4px 8px gray; width: 100px; height: 100px; background-color: lightgreen; color: white; } /* Trick goes here */ article div::after { position: absolute; bottom:-8px; right: -8px; display: inline; content: '\\00A0'; } article div:nth-child(1) { left: 500px; top: 50px; } article div:nth-child(2) { left: 350px; top: 10px; } article div:nth-child(3) { left: 175px; top: 125px; }

 <nav> navigation bar </nav> <main> <article> <div> first </div> <div> second </div> <div> third </div> </article> <section></section> <aside> input area </aside> </main>