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;
}

有不同的觀點或者實現方式。歡迎在評論區告訴我。