overflow-y: auto;无法达成预期的滚动效果

Question

我的父容器设置了height: 100%; overflow-y: auto;，但是子元素超出之后，滚动条却不能滚动，倒是body的滚动条可以滚动
.main的height为固定值的时候，是起作用的
但是百分比就不行了
同样，我使用gird的1fr，也不行

Answer 1

.main的height为100%的时候没有起作用！

Answer 2

html,body均要设置height:100%

<style>
html,body{
    height:100%;
    margin:0;
}
.con{
    height:100%;
    overflow:auto;
}
</style>

<div class="con">
    <p>
    ...
    高度很长的内容...
    ...
    </p>
</div>

---

如果答案对你有用，麻烦点赞加采纳，谢谢 ^^