HTML and CSS- Vertical scroll bar not shrinking/resizing in window of fixed height/width containing content -

so trying make website , have popup window/box appears after clicking something. popup window contains text/content, let's name "locations," per website's design. locations popup box has fixed height , width, , consequently, there vertical scroll bar i've created scroll down , read text. add more content popup unfortunately, text being cutoff, , scroll not continue scrolling down. more specific, how can add in or change such vertical scroll re-size/shrink accommodate text adding? currently, text cutoff in window, , cannot scroll down read it. in correct applications of vertical scroll bar integration, understanding, scroll bar should re-size text until end can scrolled , read. please let me know if other code snippets necessary this. below css it:

/* pop */ #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; } 

and make bit easier in providing me assistance this, i've added js well:

//locations page pop             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                     }                 );             });