JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="childOne">
    <p>
      content #1
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      hello
    </p>
  </div>
  <div class="childTwo">
      <div class="test" contentEditable="true"></div>
  </div>
</div>

CSS

.parent {
	position: relative;
	float: none;
	height: 400px;
	width: auto;
	background: purple;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.childOne {
  background: blue;
  width: 100%;
	height: auto;
	overflow-y: auto;
	flex-grow: 1;
}

.childTwo {
  background: red;
}

.test {
    background-color: white;
    margin: 5px auto;
    border: solid 1px #000;
    min-height:10px;
    max-height: 100px;
    overflow: auto;
    width: 95%;
}