为什么overflow-y：auto防止孙div溢出x？

Question

鉴于以下标记和CSS，我希望当其父.a元素悬停时，红色方块（.i）会溢出并出现在黑色包装上。但是，当我将鼠标悬停在其父元素上时，overflow-y: auto元素的父元素上的.i样式属性会导致它们变为截止状态。

预期的行为是，将红色正方形悬停在其父元素上时，它会延伸到黑色包装器元素中。到目前为止，只有从overflow-y: auto中删除.l时，我才能实现这一点。

非工作示例：

.w {
  height: 500px;
  width: 500px;
  background-color: black;
}

.l {
  width: 50%;
  height: 100%;
  background-color: lightgrey;
  overflow-y: auto;
}

.i {
  position: relative;
  background-color: white;
  height: 50px;
  width: 100%;
}

.a {
  position: absolute;
  height: 50px;
  width: 50px;
  background-color: red;
  right: 0;
}

.i:hover .a {
  right: -25px;
}

<div class="w">
  <div class="l">
    <div class="i">
      <div class="a"></div>
    </div>
    <div class="i">
      <div class="a"></div>
    </div>
    <div class="i">
      <div class="a"></div>
    </div>
  </div>

</div>

预期结果：

.w {
	height:500px;
	width:500px;
	background-color:black;
}

.l {
	width:50%;
	height:100%;
	background-color:lightgrey;
	/* overflow-y:auto; */
}

.i {
	position:relative;
	background-color:white;
	height:50px;
	width:100%;
}

.a {
	position:absolute;
	height:50px;
	width:50px;
	background-color:red;
	right:0;
}

.i:hover .a {
	right:-25px;
}

<div class="w">
	<div class="l">
		<div class="i">
			<div class="a"></div>
		</div>
		<div class="i">
			<div class="a"></div>			
		</div>
		<div class="i">
				<div class="a"></div>		
		</div>
	</div>
	
</div>

我希望溢流y与溢出x轴无关。