Наведите указатель мыши на ширину в окне содержимого с гибкой высотой

Question

Я создал эффект наведения на гибкое поле содержимого, которое изменяет ширину внутреннего поля, чтобы отобразить текст внутри.Мне нужно, чтобы это поле было гибким по высоте, чтобы можно было добавлять больше контента, однако я не хочу, чтобы высота менялась при наведении курсора.

Я привел ссылки ниже того, что получил до сих пор, поле слева показывает желаемый эффект со статической высотой, а поле справа показывает, что происходит, когда я добавляю больше текста, что вызывает проблему изменения высоты при наведении курсора, оборачивая текст внутри него.

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>

Не думаю, что я очень хорош в объяснении этого, но, надеюсь, кто-то поймет эту идею.

Answer 1

Просто добавьте минимальная высота как минимальная ширина в поле

.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;
}

Answer 2

Вы можете думать по-другому, и вместо анимации ширины вы анимируете наложение над ним, чтобы имитировать тот же эффект:

.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>