我有一个相对定位的父div（A），父div内有两个div（X和Y）。Y是一个小元素，将呈现在X的顶部，所以我在Y上添加了position: absolute。Y也将覆盖其父div大小的z%。父div A下面将有更多的元素。
Codepen链接：https://codepen.io/shiva3/full/eYjXxxy

/* A element */
.parent {
  position: relative;
  height: 20em;
  width: 40em;
}

/* X element */
.big {
  width: 100%;
  height: 100%;
  }

 /* Y Element */
 .rectangle {
  height: calc(100% - 2em);
  width: 30%;
  background-color: pink;
  z-index: 2;
  bottom: 0;
  position: absolute;
 }

这是输出

我面临的问题是，每当Y有大量内容（或者当我们放大时），它就会溢出并干扰它下面的元素。

溢出内容

我只想在Y溢出时改变元素的宽度。