How to prevent the converted elements from overflowing and automatically cutting them off?

Question

I'm using Bootstrap 4 to make a modal gallery for a friend's personal website. I set it up so that the images expand on hover - but when I set overflow to auto, they get cut off at the edge of the modal (or div). The Gallery is also the third in a set of tabs, but all of them work great.

I've tried changing which div has the overflow-auto class; I've tried tagging it with various different tags but no matter what I try, I can't figure out how to make it so that the gallery scrolls and has my image on hover Will not be cut off. Now the relevant code:

.gallery {
  overflow:visible !important;
  z-index:999;
}

.gallery-img {
  background-color:#ffeaf2;
  height:10rem;
  margin-left:0.5rem;
  margin-top:0.5rem;
  padding:0.3rem;
  transition: transform .5s;
  width:auto;
}

.gallery-img:hover {
  box-shadow: 0 0 3px 3px #ffeaf2;
  transform: scale(2);
  z-index:999;
}

<div class="tab-pane container fade overflow-auto" id="memart" style="margin-top:-24rem; height:23rem">
  <div class="row ml-2">
    <h1>Gallery</h1>
  </div>
  <div class="row">
    <div class="gallery">
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329856_TuDnR2FzlveInTq.png" class="gallery-img">
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329876_O85sZH316z1NQQz.png" class="gallery-img">
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56330075_hjGCrMrZI3dFtcT.png" class="gallery-img">
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/62146009_V0BKO0RXTJLZdTT.png" class="gallery-img">
    </div>
  </div>
</div>

If you need more information, please let me know! This is my first time posting here :)

Answer 1

You need to add enough padding to the gallery so that when you enlarge the image, there is enough room to accommodate the scaled version without any overflow occurring.

.gallery {
  padding: 3rem;
  overflow: auto;
  height: 300px;
  border: 1px solid red;
}

.gallery-img {
  background-color: #ffeaf2;
  height: 10rem;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.3rem;
  transition: transform .5s;
  width: auto;
}

.gallery-img:hover {
  box-shadow: 0 0 3px 3px #ffeaf2;
  transform: scale(1.5);
}

<div class="tab-pane container fade overflow-auto" id="memart">
  <div class="row ml-2">
    <h1>Gallery</h1>
  </div>
  <div class="row">
    <div class="gallery">
      <img src="https://picsum.photos/id/217/300" class="gallery-img">
      <img src="https://picsum.photos/id/218/300" class="gallery-img">
      <img src="https://picsum.photos/id/219/300" class="gallery-img">
      <img src="https://picsum.photos/id/220/300" class="gallery-img">
    </div>
  </div>
</div>