How to make an overlay stretch only over a specific CSS flexbox column?

.flexContainer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: relative;
}

.overlay {
  position: absolute;
  background-color: #008CBA;
  transition: transform 0.5s ease;
  /* moving the element along its x-axis (left/right)
     to the left (negative) 100% of the element's own
     width: */
  transform: translateX(-100%);
  /* setting a 0 length inset from the top, right,
     bottom and left sides of the parent element: */
  inset: 0;
}

.Flex-item {
  border: 5px red solid;
  /* in order to position the descendant .overlay
     element in relation to this element: */
  position: relative;
  overflow: hidden;
}

.Flex-item:hover .overlay {
  /* when the parent is hovered we position the element in
     its default state by setting the x-axis translation
     back to 0: */
  transform: translateX(0);
}

<div class="flexContainer">

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</div>