Тень не учитывается при прокрутке

Question

В левой части следующего рисунка вы можете увидеть объект, который был расположен на правом краю контейнера. Часть объекта обрезается в соответствии со свойством переполнения и может отображаться с помощью горизонтальной прокрутки вправо.

В правой части На картинке вы можете увидеть объект после прокрутки вправо. Тень на правом краю объекта обрезается. При прокрутке учитывался только экстент (ширина) объекта без тени.

Установка значения поля или отступа для объекта не изменил свое поведение. Эксперименты с полем прокрутки свойства css или отступом прокрутки также не дали результатов.

Поведение было протестировано в Chrome (79.0.3945.88), Opera и Edge в последних версиях под Ma c. ОС.

Я не хочу создавать еще один контейнер вокруг объекта, чтобы создать пространство. Есть ли другой способ избежать среза тени?

---

Соответствующее CSS для контейнера:

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

Соответствующее CSS для объекта:

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

Как насчет этого. Поместите что-нибудь в ::after элементов div и расположите их немного правее.
Звучит как нечто вроде клуджа, но из всего, что я пробовал, это единственная уловка, которую я мог заставить работать.

/* 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>