Javascript 父母是绝对的；仅当滚动条超过父级高度限制时，才为子级提供滚动条

在深入研究了一些搜索结果后，我发现，我正试图实现一些完全不同的东西

在我的例子中，子

div

最初将包含一点文本。最终，更多的文本将被附加到孩子身上。当文本

height

超过父

div

的

height

时，子

div

应可滚动。问题是，滚动条在新文本添加到子项后立即出现。它忽略子级

div

高度是否超过父级的情况

<div id="parent" style="position:absolute; top : 40px; height:auto; bottom : 60px; overflow-x:hidden;>
    <div id="child" style="overflow-y:auto">
        <p style="text-align:center;">some text</p>
    </div>
</div>

.child{
排名：0；
底部：0；
溢出y：自动；
位置：绝对位置；
}
一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

它工作得很好。试试这个


一些文本
请查看我的编辑。将子div设置为绝对值会使段落文本向右居中。将父项的高度更改为固定值，例如100px；可滚动项应该有一个固定的高度，因此它“知道”何时开始滚动（或者能够根据父div计算）。例如，您可以设置
高度：100px到父div，然后设置
最大高度：100%到子分区。我没有固定子分区的高度
.child{
   top:0;
   bottom:0;
  overflow-y:auto;
  position:absolute;
}
<!--update -->
    <div id="parent" style="position:absolute; top : 40px; height:300px; bottom : 60px; overflow-x:hidden;">
        <div id="child" style="overflow-y:auto">
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
            some text <br />
        </div>
    </div>

<div id="parent" style="position:absolute; top : 40px; height:200px; bottom : 60px; overflow-x:hidden;border:1px solid red;">
    <div id="child" style="overflow-y:auto;width:100px;">
        some text
    </div>
</div>