Absolute child in overflow parent

by tylorkolbeck

HTML

<div class="box1">
	<div class="box2">
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
     <p>item</p>
  </div>
  
  
  <div class="box3">
  
  </div>
</div>

CSS

.box1 {
  position: relative;
  height: 100vh;
  background: red;
  width: 200px;
}

.box2 {
  height: 100%;
  background: dodgerblue;
  width: 200px;
  overflow-y: scroll;
}


.box3 {
  position: absolute;
  width: 50px;
  height: 50px;
  right: -25px;
  top: 0;
  background: pink;
}