如何避免div溢出视口且不被父级div的margin裁剪？

我希望让div的溢出在视口边缘处停止，不想通过给body添加overflow-x: hidden;这种全局方式解决，以下是相关代码：

HTML代码 #

<body>
  <div class="wrapper">
    <main>
      <section class="hero">
        <div class="cat-container">
          <div class="cat">
            <img src="img/cat.png" alt="cat" />
            <div class="inner-circle"></div>
            <div class="outer-circle"></div>
          </div>
        </div>
      </section>
    </main>
  </div>
</body>

CSS代码 #

body {
  margin: 0;
  background-color: #FFFBF3;
  font-family: 'Inter', sans-serif;
}

.wrapper {
  margin: 2em;
}

.hero {
  margin-top: 6.5em;
}

.cat {
  position: relative;
  height: 450px;

  img {
    position: absolute;
    left: 50%;
    top: 50%;

    height: 247px;

    transform: translate(-36%, -35%);
  }

  .inner-circle, .outer-circle {
    position: absolute;
    left: 50%;
    top: 50%;

    border-radius: 50%;
  }

  .inner-circle {
    z-index: -1;

    width: 305px;
    height: 305px;

    background-color: #FFEBC3;

    transform: translate(-50%, -40%);
  }

  .outer-circle {
    z-index: -2;

    width: 573px;
    height: 573px;

    background-color: white;

    transform: translate(-50%, -50%);
  }
}

已尝试的无效方法 #

• 给.cat添加overflow-x: hidden;：内部元素是绝对定位脱离文档流，无法被.cat的溢出规则裁剪
• 给.wrapper添加overflow-x: hidden;：白色的.outer-circle会被.wrapper的margin区域裁剪，达不到在视口边缘停止的效果

针对性解决方案 #

给.cat-container添加裁剪容器配置，让它刚好覆盖到视口边缘，同时裁剪内部溢出内容：

.cat-container {
  position: relative;
  overflow-x: hidden;
  /* 宽度设为视口宽度减去wrapper的左右margin总和 */
  width: calc(100vw - 4em);
  /* 负margin抵消wrapper的左右margin，让容器延伸到视口边缘 */
  margin: 0 -2em;
}

原理说明 #

1. calc(100vw - 4em)确保容器宽度刚好匹配视口减去wrapper的左右margin（2em*2），裁剪范围精准到视口边缘
2. margin: 0 -2em让容器突破wrapper的margin限制，横向延伸到视口左右两侧，同时不影响页面其他区域的布局
3. overflow-x: hidden负责裁剪.outer-circle超出视口的部分，实现局部裁剪的需求

内容的提问来源于stack exchange，提问作者Farid Nogales