html - 垂直滚动 div

Question

我遇到了向我的 container .right-side 添加垂直滚动条的问题。在容器内有两个 div 放置了 .svg-position。容器 .right-side 通常包含 SVG，但在示例中我使用了一些文本来理解。

这是我的代码:

  .right-side{
    position: absolute;
    top: 0;
    right: 0;
    width: 800px;
    height: 400px;
    z-index: -1;
    margin-right: 20px;
    overflow: auto;
    white-space: nowrap;
  }

  .svg-position{
      height: 800px;
      width: 700px;
      position: relative;
    background: rgb(97, 3, 18);
  }

  .svg-position:nth-child(2){
    background: rgb(blue);
  }

p{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
  color: white;
}

<div class="right-side">
               <div class="svg-position">
                <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
                </div> 
                <div class="svg-position">
                      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
                      </div>
            </div>

我在这里试过了，它起作用了，但在我的 vs 代码中它不起作用。

Answer 1

.right-side{ 最大高度:150px；溢出-y:滚动；