html - flex box如何使子级溢出保持垂直对齐

Question

我有 2 个孩子的弹性盒子。两者都垂直对齐。第二个孩子有一个头衔。这应该是静态的。当有更多项目时，list-items旁边的应该是可滚动的。

目前我添加了一个高度来list-items获取滚动条。但我仍然不知道要应用的确切高度。list-items当flex 孩子中有更多内容时，使其可滚动的正确方法是什么？

这是我的演示：

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

标签： htmlcss