Scrolling on overflow when making a list of N items - css

Question

I have a prompt-box div that has a max-height of 80% of the screen.
Inside of it, I have a ul which holds a bunch of li elements depending on how many the user adds.
How do I configure this so that once that prompt-box hits a certain size, new items can be added to the list but the contents just scroll instead of overflowing like this?
Thanks!
Edit: Adding html & css
<div className='prompt-box'>
<p className='title'>What's in your future?</p>
<ul className='options-holder'>
{
this.state.items.map(item => (
<li key={item.id} className='option'>
<div className='circle' />
<p className='item-text'>{ item.text }</p>
</li>
))
}
<li key={0} className='option form'>
<div className='circle' />
<form className='new-item-form' onSubmit={this.handleSubmit}>
<input className='new-item-input' placeholder='Type something and press return...' onChange={this.handleChange} value={this.state.text} />
</form>
</li>
</ul>
<button className='confirm-button'>Continue</button>
</div>
.prompt-box {
#include absolute-center;
background: #1E1E1E;
width: 35%;
margin: 0 auto;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ccc;
font-family: 'Circular Book';
max-height: 80%;
overflow-y: auto;
}
.prompt-box .title {
text-align: center;
font-size: 30px;
margin-top: 30px;
margin-bottom: 25px;
}
.prompt-box .options-holder {
list-style: none;
border-radius: 3px; // not currently working
padding: 0;
width: 95%;
margin: 12px auto;
}
.prompt-box .option {
background: #303030;
padding: 18px;
border-bottom: 1px solid rgba(196, 196, 196, 0.1);
}
.prompt-box .option.form {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.prompt-box .item-text {
color: white;
font-size: 24px;
margin: 0;
display: inline-block;
padding: 0 18px;
}
.prompt-box .new-item-form .new-item-input {
background: transparent;
border-style: none;
font-size: 24px;
padding-left: 18px;
color: white;
width: 80%;
&:focus { outline: none; }
}
.prompt-box .confirm-button {
width: 95%;
margin: 22px auto 18px auto;
}

Answer 1

You haven't shown us any HTML/CSS code for us to reproduce and test a fix for the issue, but adding something like this should work, to allow that container to scroll vertically when its height is exceeded:
.prompt-box {
overflow-y: auto;
}

Answer 2

Try a overflow: scroll; style rule on your div.prompt-box. (You're already giving it a max height, so the extra contents should have a vertical scroll bar).

Answer 3

I threw a max-height and an overflow-y: scroll on the ul and it did the trick.