Возможно ли сделать box-shadow видимым внутри div с помощью «overflow: auto»?

Question

Ширина родительского и дочернего элементов должна быть одинаковой.Я видел несколько похожих тем, но подходящего решения не было.

.b1 {
  width: 200px;
  margin: 0 auto;
  background-color: orange;
  height: 500px;
  overflow: auto;
}

.b2 {
  height: 400px;
  overflow: auto;
  background-color: #ccc;
}

.text1 {
  margin-top: 100px;
  height: 50px;
  box-shadow: 0 0 50px 0 #00a;  
  background-color: #0b0;
}

<div class="b2">
  <div class="b1">
    <div class="text">
      <div class="text1"></div>
    </div>
  </div>
</div>

Answer 1

Идея заключалась бы в создании псевдоэлемента для .b1, расположенного относительно .b2 (чтобы избежать переполнения), тогда вы просто примените тот же стиль, что и в зеленом поле, и у вас будет переполненная тень.

.b1 {
  width: 200px;
  margin: 0 auto;
  background-color: orange;
  height: 200px;
  overflow: auto;
}

.b2 {
  height: 300px;
  overflow: auto;
  background-color: #ccc;
  position:relative; /* Relatively to this:*/
  z-index:0;
}

.text1 {
  margin-top: 80px;
  height: 50px;
  box-shadow: 0 0 50px 0 #00a;  
  background-color: #0b0;
}
.b1:before {
  content:"";
  position:absolute;
  height:50px;
  width:200px;
  background:#0b0;
  top:80px;
  z-index:-1;
  box-shadow: 0 0 50px 0 #00a; 
}

<div class="b2">
  <div class="b1">
    <div class="text">
      <div class="text1"></div>
    </div>
  </div>
</div>