Is there a way to prevent the div from expanding when there is a lot of text, such as copy text paste?
I'd like the height of the div to remain constant regardless of the amount of content inside.
CSS usually precedes HTML, but I included it here for clarity on finding a solution.
#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>