css 在一定区域内滚动显示，不修改父级样式

做项目时，会遇到一些零碎的技术点。记录下来以防忘记

需求：图中圈中的部门是滚动的。不修改父级样式

代码：

<div class="right-text-bottom">
                <div class="right-text-p">有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，
    ２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生 密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生
密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，
    ２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生 密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生
密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，
    ２６个民族和谐共处，相生有一个美丽的地方，各族人民在这里生长。密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生 密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生
密密的寨子紧紧相连，那弯弯的江水日夜流淌……”这里，２６个民族和谐共处，相生
                </div>
                <!-- <div class="parent">
                        <div class="child">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        ...
                </div> -->
            </div>

.right-text-bottom {
    width: 90%;
    height: 64%;
    overflow: hidden;
    /* border: 1px dashed red; */
}
.right-text-p {
    padding: 0 8% 0 3%;
    text-align: left;
    line-height: 2.4em;
    font-size: 1.3em;
    color: #333333;
    text-indent: 2em;
    white-space: pre-wrap;
    height: 90%;
    width: calc(100% + 1em);
    overflow: auto;
}

有不同的观点或者实现方式。欢迎在评论区告诉我。

原文地址：https://www.cnblogs.com/clwydjgs/p/11412300.html