flex box how to make overflow on child level remain vertically aligned

Question

I have flex box with 2 Childs. both are vertically aligned. the second child has a title. which should be static. and the list-items next to that should be scrollable when there is more items.

at present I added a height to list-items to get the scroll bar. but still i do not know the exact height to apply. what is the correct way to make it scrollable when there is more list-items in the flex children?

here is my demo:

.parent{
  display: flex;
  border: 1px solid red;
  height: 20rem;
  align-items: center;
}

p{
 border: 1px solid black;
}

.drop{
  background-color: beige;
  flex: 1;
}

.list{
  background-color: lightblue;
  width: 20rem;
 
}

.list-items{
  overflow-y: auto;
  height: 18rem;
}

 <div class="parent">
      <div class="drop">
        drop item
      </div>
      <div class="list">
        <h4>Title goes here </h4>
        <div class="list-items">
          <p>List items goes here </p>
          <p>List items goes here </p>
          <p>List items goes here </p>
          <p>List items goes here </p>
          <p>List items goes here </p>
           <p>List items goes here </p>
          <p>List items goes here </p>
          <p>List items goes here </p>
          <p>List items goes here </p>
          <p>List items goes here </p>
        </div>
      </div>
    </div>