Question

我有一个prompt-box div，其max-height占屏幕的80％。

在其中，我有ul，其中包含一堆li元素，具体取决于用户添加的数量。

如何配置此项，以便prompt-box达到一定大小后，新项目可以添加到列表中，但内容只是滚动而不是像这样溢出？

谢谢！

编辑：添加html＆amp; 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

您还没有向我们展示任何HTML / CSS代码，以便我们重现并测试该问题的修复程序，但添加类似的内容应该可行，以允许该容器在超出其高度时垂直滚动：< / p>

.prompt-box { overflow-y: auto; }

Answer 2

在div.prompt-box上尝试overflow: scroll;样式规则。（你已经给它一个最大高度，所以额外的内容应该有一个垂直滚动条。）

Answer 3

我在max-height上投了一个overflow-y: scroll和一个ul，然后就可以了。

在制作N个项目列表时滚动溢出

3 个答案: