父容器高度不固定，内部元素怎样才可以滚动？

[lencx]

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

CodePen Demo

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

.scroll {
  overflow-y: auto;
}

<div class="parent">
  <div class="scroll">
    <!-- <p> text 1 </p> -->
    <p> text .. </p>
    <!-- <p> text n </p> -->
  <div>
<div>

[lencx]

解决方案，只需修改 parent 的 css 即可。

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

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

---

参考资源

• CSS Flexible Box Layout
• Boxes That Fill Height (Or More) (and Don’t Squish)
• flexbox misbehaving with max-height
• How to make a scrollable container with dynamic height using Flexbox