Scroll Bar not Fully show the value

I'm trying to make a card with displaying some text when hovering.

The scroll bar is not fully scrolled, so I can't see the entire text from top to bottom. I need a help to fix this problem.

enter image description here

CSS

#skills a {
  border-radius: 25px;
  box-shadow: 1rem 1rem 1rem 0 rgb(68 68 68 / 20%);

  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#skills figure {
  width: 100%;
  height: 100%;
}

#skills figcaption {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);

  position: absolute;
  top: 0;
  left: 0;

  color: #fff;

  opacity: 0; 
  transition: 0.3s;
}

#skills a:hover figcaption,
#skills a:focus figcaption {
  opacity: 1;
}

HTML

 <section class="untree_co-section bg-warning" id="skills">
      <div class="container">
        <div class="row" data-aos="fade-up" data-aos-delay="200">
          <div class="col-sm-4 mb-3" id="div-front">
            <a>
              <figure class="m-0">
                <img src="images/skills/front1.jpg" alt="Image" class="img-fluid" id="img-front" />
                <figcaption class="d-flex align-items-center justify-content-center overflow-auto">
                  <ul class="px-5 py-2 m-0 list-unstyled">
                    <li class="mb-2">
                      ....
                    </li>