Я столкнулся с проблемой добавления вертикальной полосы прокрутки в мой контейнер .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-коде это не сработало.

0
Daniel_21

2 ответа

Добавьте max-height вместо height в свой класс .right-side

.right-side {max-height: 150px; overflow-y: scroll;}

58503598