Make box-shadow wider than element itself

Question

Is it possible to make a box-shadow CSS call wider than the HTML element to which we are applying it, while keeping the same height as the element to which we are applying it? I can increase the spread, but that will increase the height. As you can see in my snippet, the max width the box-shadow is only as wide as the .box div. Is there a reason why we would not want the box shadow ever wider than the HTML element or why there would be a restriction to this?

.container {
  background-color: gray;
  height: 100px;
  width: 100px;
}
.box {
  background-color: blue;
  height: 50px;
  width: 50px;
  box-shadow: 55px 0px 0px 0px rgba(0, 0, 0, .2);
}
.container-spread {
  background-color: gray;
  height: 100px;
  width: 100px;
}
.box-spread {
  background-color: blue;
  height: 50px;
  width: 50px;
  box-shadow: 55px 0px 0px 5px rgba(0, 0, 0, .2);
}

<div class="container">
  <div class="box">box</div>
  container
</div>

<br>
<br>

<div class="container-spread">
  <div class="box-spread">box</div>
  container
</div>

Answer 1

You can make use of the pseudo element to enlarge the element and then apply box-shadow. height: 100% will make sure the height of the box-shadow is same as the element. The width value will be the key value to change.

.container {
  background-color: gray;
  height: 100px;
  width: 100px;
}
.box {
  background-color: blue;
  height: 50px;
  width: 50px;
  position: relative;
}
.box::after {
  box-shadow: 85px 0 0 0 rgba(0, 0, 0, 0.2);
  content: " ";
  height: 100%;
  position: absolute;
  left: -50%;
  top: 0;
  width: 150%;
}

<div class="container">
  <div class="box">box</div>
  container
</div>