Scrollbar restructuring webpage text - html

Question

I'm here today because I am coding a website for practice purposes and I've come across a problem. The website consists of a bunch of panels stacked vertically, with text in them and a button to create more panels. That button, makes the website be bigger vertically so the chrome scrollbar appears. (It also appears for about 1/10 of a second when a new panel is created then recalculates and hides, even if the panels haven't reached the bottom yet)
The main problem is that the scrollbar, because I have the text set to break on overflow, it restructures all text and makes it look really bad.
Is there any way I can prevent that with some css so I am always leaving some space on the right side for the scrollbar? I am leaving some margin but it just restructures the text anyway, just with a margin added to it.
here's the css for the div panel that pops in and the text div inside of it:
.poppingdiv {
display: block;
background-color: white;
border: 1px solid #dfe1e6;
border-radius: 30px;
margin-left: 0.5cm;
margin-right: 0.5cm;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: auto;
}
.textdiv {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 14px;
margin: 30px;
word-wrap: break-word;
animation: pop-text 0.5s ease forwards;
}
#popperdiv {
opacity: 0;
animation: pop 0.5s ease forwards;
}
#keyframes pop{
0% {opacity: 0%; width: 0px;}
100% { opacity: 100%; width: 100%;}
}
#keyframes pop-text {
0%,60% {opacity: 0%;}
100% {opacity: 100%;}
}
.buttonround {
display: block;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: normal;
background-color: rgb(255, 132, 128);
border: 3px solid rgb(255, 132, 128);
color: #fffefd;
position: fixed;
font-size: 30px;
bottom: 0.5cm;
right: 0.5cm;
width: 50px;
height: 50px;
border-radius: 50%;
}
.buttonround:hover {
transition: color 150ms ease-in-out;
background-color: rgb(255, 255, 255);
color: rgb(255, 132, 128);
}
.buttonround:active{
background-color: #ff8181;
color: white;
}
and the html: (the text is completely random)
<div id="container">
<div class="popperdiv" id="popperdiv">
<div class="textdiv">
Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.
<br><br>
By in no ecstatic wondered disposal my speaking. Direct wholly valley or uneasy it at really. Sir wish like said dull and need make. Sportsman one bed departure rapturous situation disposing his. Off say yet ample ten ought hence. Depending in newspaper an september do existence strangers. Total great saw water had mirth happy new. Projecting pianoforte no of partiality is on. Nay besides joy society him totally six.
</div>
</div>
</div>
<button class="buttonround" onclick="onAddButtonClick()">+</button>
js:
var divnum = 0
function onAddButtonClick () {
var container = document.getElementById("container");
var newcont = document.createElement("div");
newcont.setAttribute("class", "popperdiv");
newcont.setAttribute("id", "cont" + divnum)
newcont.setAttribute("id", "popperdiv")
container.prepend(newcont);
var newtext = document.createElement("div");
newtext.setAttribute("class", "textdiv");
newtext.innerText = "Text"
newcont.appendChild(newtext);
divnum++;
}

Answer 1

Remove width add a border to the pop keyframe
#keyframes pop{
0% {opacity: 0%; border: 0px solid #dfe1e6;}
100% { opacity: 100%; border: 1px solid #dfe1e6;}
}