Hover-styling a width on a flexible height content box - html

Question

I have created a hover effect on a flexible content box that changes the width of an inner box to reveal text inside. I need this box to be flexible in height so that more content can be added, however, I don't want the height to change as I hover.
I've linked below what I've got so far, the box on the left shows my desired effect with a static height and box on the right shows what happens when I add more text which causes the issue of the height changing as I hover by wrapping the text inside it.
https://jsfiddle.net/ndpty6xa/
.flex {
display: flex;
justify-content: center;
}
.box {
width: 50%;
background-color: red;
border: 2px solid black;
min-width: 200px;
flex-direction: column;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
width: 0%;
height: 90%;
transition: all .5s;
}
.text {
position: relative;
text-align: center;
overflow: hidden;
}
.box:hover>.content {
width: 90%;
}
#media(max-width: 450px) {
.flex {
flex-wrap: wrap;
}
.box {
flex-grow: 1;
}
}
<div class=flex>
<div class=box>
<div class=content>
<div class=text>
<h3>This</h3>
<p>Works</p>
</div>
</div>
</div>
<div class=box>
<div class=content>
<div class=text>
<h3>This doesnt</h3>
<p>TestTe stTestTestTest TestTestTestT estTestT estTes tTestTe stTestTestTest</p>
</div>
</div>
</div>
</div>
I don't think I'm very good at explaining this but hopefully, someone gets the idea.

Answer 1

You can think differently and instead of animating width you animate an overlay above it to simulate the same effect:
.flex {
display: flex;
justify-content: center;
}
.box {
width: 50%;
background-color: red;
border: 2px solid black;
min-width: 200px;
flex-direction: column;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.content {
position: relative;
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
text-align: center;
background-color: white;
width: 90%;
height: 90%;
}
.content:before {
content:"";
position:absolute;
top:0;
left:50%;
right:0;
bottom:0;
background:red;
z-index:1;
transition: all .5s;
}
.content:after {
content:"";
position:absolute;
top:0;
right:50%;
left:0;
bottom:0;
background:red;
z-index:1;
transition: all .5s;
}
.box:hover>.content:before {
left: 100%;
}
.box:hover>.content:after {
right: 100%;
}
#media(max-width: 450px) {
.flex {
flex-wrap: wrap;
}
.box {
flex-grow: 1;
}
}
<div class="flex">
<div class="box">
<div class="content">
<h3>This</h3>
<p>Works</p>
</div>
</div>
<div class="box">
<div class="content">
<h3>This also works!</h3>
<p>TestTe stTestTestTest TestTestTestT estTestT estTes tTestTe stTestTestTest</p>
</div>
</div>
</div>

Answer 2

Simply add min-height like min-width to box
.box{
width: 50%;
background-color: red;
border: 2px solid black;
min-width: 200px;
flex-direction: column;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 250px;
}