<div class='grand_list'>
  <div class='list'>
  <div class='box'>
    <div class= 'el'>
      <div class='button'></div>
      <div class='info'></div>
    </div>
  </div>
</div>
</div>

.grand_list {
  position: relative;
   width: 300px;
  .list {
    display:flex;
    width: 300px;
    height: 450px;

    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid black;

    overflow-y: auto;

    .box {
      width: 300px;
      height: 150px;
      background: red;

      flex-shrink: 0;
      
      .el {
        position: absolute;
        
        width: 15px;
        height: 15px;
         .button {
            width: 15px;
            height: 15px;
             background: black;
          }
          .button:hover ~ .info {
          opacity: 1;
        }
        .info {
          position: absolute;
          right: -80px;
          width: 150px;
          height: 150px;

          background: green;

          opacity: 0;
        }
      }
    }
  }
}