Есть div, который имеет динамическое содержание. Рост родителя составляет 100% от тела, а ребенок неизвестен. Метод translateY (-50%) работает хорошо только в том случае, если высота дочернего содержимого меньше родительского. Но если это больше, дочерний div (зеленый) начинает переполнять родительский (желтый), как на изображении ниже.Как правильно установить родительский div, увеличить высоту и добавить несколько отступов.

.body {
  height: 300px;
  background: red;
}
.parent {
  height: 100%;
  position: relative;
  background: rgb(105, 199, 115);
   
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: green;
  width: 200px;
 }

<div class="body">
  <div class="parent">
    <div class="child">
      Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, 
    </div>
  </div>
</div>