How to animate a div to move from the top of a flexbox to the bottom

Issue

I have a container div that is a flexbox, Inside that flexbox I have three columns. I want to animate the cube shape from the top to the bottom. However, using translateY() it only moves the cube down the distance of itself and not the parent. How can I modify it so it moves to the bottom of the container?

div {
  display: flex;
  justify-content: space-between;
  text-align: center;
  transition: 350ms;
  font-size: x-large;
}

div div {
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.cube {
  align-self: flex-start;
  width: 25%;
  height: 25%;
  background-image: linear-gradient(black, gray, black);
}

div:hover .cube {
  transform: translateY(100%);
}

<div style="width:800px;height:800px;border: medium #999999 solid">
  <div class="cube">A cube</div>
</div>

Solution

You could use a relative position and animate the top value:

div {
  position: relative;
  top: 0;
}
div:hover .cube {
  top: 75%;
}

div {
  display: flex;
  justify-content: space-between;
  text-align: center;
  transition: 350ms;
  font-size: x-large;
  position: relative;
  top: 0;
}

div div {
  color: black;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: red;
}

.cube {
  align-self: flex-start;
  width: 25%;
  height: 25%;
  background-image: linear-gradient(black, gray, black);
}

div:hover .cube {
  top: 75%;
}

<div style="width:800px;height:800px;border: medium #999999 solid">
  <div class="cube">This is a cube</div>
  <div>This is a triangle</div>
  <div>This is a big, green circle</div>
</div>

Answered By - Sean Stopnik