Why can height 100% not be applied in my div?

Can someone explain me why the height of div.project-desc (child of div.project) does not occupy the 100% of its container when div.project is hovered? This occurs when the viewport width is less than 769px. When the size of the viewport is greater than 769px all works as expected. I'm using Bulma .tile and .box. I understand that this is some kind of conflict with a media query for the .tile element but I'm unable to figure out what it is. Thanks! Codepen: https://codepen.io/albertrf147/pen/OqOJqG?editors=1100

<section class="section is-white has-text-centered">
    <div class="container is-narrow">
      <h1 class="title">My Projects</h1>
      <h2 class="subtitle">Here is some of my work, which I'm most proud of.</h2>

      <div class="tile is-ancestor">

        <div class="tile is-4 is-vertical is-parent">

          <div id="project-1" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">CodePen</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>
          </div>

          <div id="project-2" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">Glitch</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>

          </div>
        </div>

        <div class="tile is-parent">
          <div id="project-3" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">Another</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>

          </div>
      </div>

    </div>
  </div></section>

CSS

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css");

* {
  font-family: "Montserrat" !important;
}

body {
  background: #f5f5f5;
}

.hero-foot img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.list {
  margin-top: 30px;
}

.container.is-narrow {
  max-width: 1000px;
}

.skills {
  margin-top: -200px;
}

.tile.is-child {
  min-height: 200px;
}

.is-child.box {
  background-size: cover;
}

#project-1 {
  background-image: url("https://images.pexels.com/photos/449627/pexels-photo-449627.jpeg?cs=srgb&dl=beach-beautiful-bridge-449627.jpg&fm=jpg");
}

#project-2 {
  background-image: url("https://images.pexels.com/photos/97077/pexels-photo-97077.jpeg?cs=srgb&dl=ai-codes-coding-97077.jpg&fm=jpg");
}

#project-3 {
  background-image: url("https://images.pexels.com/photos/5836/yellow-metal-design-decoration.jpg?cs=srgb&dl=art-creative-creativity-5836.jpg&fm=jpg");
}

.project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.project-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  //background: #000;
  opacity: 0.5;
  color: white;
  line-height: 2.5em;
  z-index: 2;
}

.project:hover .project-title {
  visibility: hidden;
}

.project-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 2.5em;
  padding: 0 24px;
  text-align: justify;
  //border-radius: 5px;
  color: transparent;
  background: #000;
  opacity: 0.5;
  //visibility: hidden;
  z-index: 1;
  transition: all 0.2s ease;
}

.project:hover .project-desc {
  color: #fff;
  height: 100%;
  border-radius: 5px;
}

.project-text {
  font-size: 0.8em;
}

Bulma css

@media screen and (min-width: 769px), print
.tile.is-4 {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
}

@media screen and (min-width: 769px), print
.tile:not(.is-child) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.tile.is-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.tile.is-parent {
    padding: .75rem;
}
.tile {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: block;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
}

Solution

If you add position: absolute in .project-desc class it will work. I'm answering based on your codepen link.