HTML和CSS-垂直滚动条在包含内容的固定高度/宽度的窗口中不缩小/调整大小

Question

所以我想创建一个网站并在点击某些内容后出现一个弹出窗口/框。这个弹出窗口包含文本/内容，按照我的网站设计，我们将其命名为“Locations”。此位置弹出框具有固定的高度和宽度，因此，我创建了一个垂直滚动条，可向下滚动并读取文本。我想为这个弹出窗口添加更多内容，但不幸的是，文本被截断，滚动不会继续向下滚动。更具体地说，我如何添加或更改某些内容，以便垂直滚动将重新调整/缩小自身以适应我添加的额外文本？目前，文本只是在窗口中截止，我无法向下滚动阅读它。在垂直滚动条集成的正确应用中，根据我的理解，滚动条应该重新调整大小，以便可以滚动和读取直到最后的所有文本。如果需要其他代码段，请告诉我。下面是它的CSS：

/* Pop Up */
#popupAbout, #popupLocations, #popupContact, #popupBlog {
    height: 600px;
    width: 900px;
    overflow: scroll;
    background-color: rgba(0, 0, 0, 0.75);
    border: 2px solid #cecece;
    z-index: 15;
    padding: 20px;
    color: #FFF;
    -webkit-box-shadow: 0px 0px 4px #000 inset;
    -moz-box-shadow: 0px 0px 4px #000 inset;
    box-shadow: 0px 0px 4px #000 inset;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    margin-top: -50px;
    visibility: hidden;
}

为了让我更容易为此提供帮助，我也为它添加了JS：

//Locations Page Pop Up
            var popupLocationsStatus = 0;

            function loadPopupLocations(){
                if(popupLocationsStatus==0){
                    $("#popupLocations").fadeIn("slow");
                    popupLocationsStatus = 1;
                }
            }

            function disablePopupLocations(){
                if(popupLocationsStatus==1){
                    $("#popupLocations").fadeOut("slow");
                    popupLocationsStatus = 0;
                }
            }

            function centerPopupLocations(){
                var windowWidth = document.documentElement.clientWidth;
                var windowHeight = document.documentElement.clientHeight;
                var popupLocationsHeight = $("#popupLocations").height();
                var popupLocationsWidth = $("#popupLocations").width();
                $("#popupLocations").css({
                    "position": "absolute",
                    "top": windowHeight/2-popupLocationsHeight/2,
                    "left": windowWidth/2-popupLocationsWidth/2
                });
            }


            $(document).ready(function(){
                $("#popupLocations").fadeOut();
                popupLocationsStatus = 0;
                $("#Locations").click(function(){
                $("#popupLocations").css({
                    "visibility": "visible" });
                    disablePopupAbout();
                    disablePopupContact();                  
                    centerPopupLocations();
                    loadPopupLocations();
                });
                $("#popupLocationsClose").click(function(){
                    disablePopupLocations();
                });
            });
            $(function()
            {
                $('#popupLocations').jScrollPane();
                $('.popupLocations').jScrollPane(
                    {
                        showArrows: true,
                        horizontalGutter: 10
                    }
                );
            });