如何实现动态高度的滚动容器？

当滚动内容高度小于 200px 时，父容器高度等于滚动容器高度；当滚动容器高度大于 200px 时，滚动容器应该滚动，但是以下实现未滚动，应该如何解决？

.parent {
  max-height: 200px;
  overflow: hidden;
}

.scroll {
  overflow-y: auto;
}

<div class="parent">
  <div class="scroll">
      <p> text 1 </p>
      <p> text 2 </p>
      <p> text 3 </p>
      <p> text 4 </p>
      <p> text 5 </p>
      <p> text .. </p>
      <p> text n </p>
  <div>
<div>

http://localhost:3000

text 1

text 2

text 3

text 4

text 5

text ..

text n

查看解决方案

只需修改 parent 的 css 即可。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。

.parent {
  max-height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}