Div Tile расширяется с текстом, как я могу предотвратить это (попытка переполнения: скрыто)

Question

Div расширяется, если у меня много текста copy text paste. Я хочу, чтобы div оставался на одной высоте независимо от того, сколько текста внутри. Я знаю, что CSS предшествует HTML, подумал, что лучше было бы увидеть решение.

#containerTiles .tilesText {
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  position: relative;
  font-size: 20px;
}

#tiles {
  height: 33.34%;
  width: 33.34%;
  position: absolute;
  top: 66.68%;
  left: 50.01%;
  background: #3366CC;
  box-shadow: 5px 7px 0px 0px grey;
  transition: all ease .35s;
  border: solid 2px white;
  display: table;
  overflow: hidden;
  padding: 20px;
}

#tiles:hover {
  top: 65.12%;
  left: 48.9%;
  box-shadow: 5px 7px 0px 0px #003c85;
  transition: all ease .35s;
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: none;
  border-bottom: none;
}

<div id="containerTiles">
  <a href='test.php'>
    <div id="tiles">
      <div style="display: table-cell; vertical-align: middle;">
        <div class='tilesText'>copy text pastecopy text pastecopy text pastecopy text pastecopy text pastecopy text pastecopy text pastecopy text paste</div>
      </div>
    </div>
  </a>
</div>

Answer 1

Я изменил display: table на display: block и установил max-height: 33.34%; overflow-y: auto;, поэтому с этим стилем, если высота введенного текста превышает высоту контейнера (#tiles), контейнер можно прокручивать.

#containerTiles .tilesText {
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  position: relative;
  font-size: 20px;
}

#tiles {
  height: 33.34%;
  max-height: 33.34%;
  width: 33.34%;
  position: absolute;
  top: 66.68%;
  left: 50.01%;
  background: #3366CC;
  box-shadow: 5px 7px 0px 0px grey;
  transition: all ease .35s;
  border: solid 2px white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
}

#tiles:hover {
  top: 65.12%;
  left: 48.9%;
  box-shadow: 5px 7px 0px 0px #003c85;
  transition: all ease .35s;
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: none;
  border-bottom: none;
}

<div id="containerTiles">
  <a href='test.php'>
    <div id="tiles">
      <div style="display: table-cell; vertical-align: middle;">
        <div class='tilesText'>copy text pastecopy text pastecopy text pastecopy text pastecopy text pastecopy text pastecopy text pastecopy text paste</div>
      </div>
    </div>
  </a>
</div>