为什么我的 div 不可滚动，如何做到这一点？

Question

我正在尝试在我正在开发的网站上显示一些数据。我创建了一个包含所有信息的 div，但由于信息似乎从 div 溢出，我无法看到所有信息。我可以在分隔线的边缘看到一个滚动条，但我似乎无法使用它，因为它是灰色的。这是我的问题http://i.imgur.com/EU4aOG7.png 的屏幕截图。我需要能够到达底部，因为那里有三个按钮，没有滚动我无法访问，但我不知道我应该做什么。我对 Web 开发还很陌生，所以我可能会遗漏一些非常明显的东西，

<div className="learn-content mdl-typography--text-center"  style={{width: '80%', margin: 'auto'}}>
                <div className="grid">
                  <div className="card mdl-shadow--2dp">
                    <div className="card__title mdl-color--indigo mdl-color-text--white">
                      <h4 className="card__title-text">Purchaser Information</h4>
                    </div>
                    <div className="card__supporting-text mdl-color-text--white-600" id="messagesDiv">
              
                      <p>Legal Name: {legalEntity}</p>
                      <p>Operating Name: {operatingName}</p>
                      <p>Role: {string_role[role]}</p>
                      <p>Address 1: {address1}</p>
                      <p>Address 2: {address2}</p>
                      <p>City: {city}</p>
    //many more lines of information here <-- not actually in code.
                <div>
                <Button accent ripple onClick={this.approve.bind(this,key_name,role)} className="mdl-color-text--indigo btn btn-primary">Approve</Button>
                <Button accent ripple onClick={this.reject.bind(this,key_name,role)} className="mdl-color-text--indigo btn btn-primary">Reject</Button>
                <Button accent ripple onClick={this.return_back.bind(this)} className="mdl-color-text--indigo btn btn-primary">Back</Button>
                </div>

还有更多信息要显示，我只是不想显示整个代码文档，因为有超过 1000 行。请告诉我

Answer 1

您需要在 CSS 中添加类似的内容：

#messagesDiv {
overflow-y: scroll;
}