html - Prevent box shadow of element flowing out of its parent div

Question

I want the box shadow of a child element only overflow within it's parent element but it goes out of its parent element. How can I fix this?

How it is actually:

How it is expected to be:

#main {
  background: #ddd;
  height: 200px;
  width: 200px;
  padding: 50px;
}

#child {
  background: #eee;
  height: 100px;
  width: 100px;
  padding: 50px;
}

#grand-child {
  background: #fff;
  height: 100px;
  width: 100px;
  box-shadow: 0 0 100px 40px red;
}

<div id="main">
  <div id="child">
    <div id="grand-child"></div>
  </div>
</div>

question from:https://stackoverflow.com/questions/65897365/prevent-box-shadow-of-element-flowing-out-of-its-parent-div

Answer 1

You simply add overflow: hidden

#main {
  background: #ddd;
  height: 200px;
  width: 200px;
  padding: 50px;
  overflow: hidden;
}

#child {
  background: #eee;
  height: 100px;
  width: 100px;
  padding: 50px;
  overflow: hidden;
}

#grand-child {
  background: #fff;
  height: 100px;
  width: 100px;
  box-shadow: 0 0 100px 40px red;
}

<div id="main">
  <div id="child">
    <div id="grand-child"></div>
  </div>
</div>