Javascript 如何限制React组件的大小并添加滚动？

我有动态数量的按钮，我需要渲染取决于用户。在此对话框中，他们需要选择一个选项并提交。我的目标是使其看起来像这样，最多显示4个按钮，并能够滚动浏览其余按钮：

但是，如果有4个以上的可用按钮，即使用户在对话框外向下滚动页面，这些按钮也会离开屏幕，无法访问：

我想重新构造我的代码，这样我就有了一个react组件，一次只能显示4个，确保整个屏幕都在页面上

我已将代码存储在此JSFIDLE中：

renderDialog和renderButtons是此处的相关部分：

renderButtons: function() {
var accountList = this.props.accounts;


var buttonList = accountList.map(function(account) {
  return (<div className='col-sm-6'>
    <GEMSelector classname='leftButtonContainer' header={account.organization_name} stat={account.tier} contacts={account.subscriber_count+' / '+account.max_subscribers+' Contacts'} credits={account.mailing_credits + ' Credits'}></GEMSelector>
  </div>);
});
var accountsGrid =
  (<div className="container-fluid">
    <div className="row">
      <div className='col-sm-6'>
        <GEMSelector classname='leftButtonContainer' header='FRANKS CASINO' stat='Create new account' contacts='' credits='' specialpadding={true}></GEMSelector>
      </div>
      {buttonList}
    </div>
  </div>);

return {accountsGrid};
  }

renderButtons:function（）{
var accountList=this.props.accounts；
var buttonList=accountList.map（函数（帐户）{
返回(
);
});
var帐户网格=
(
{按钮列表}
);
返回{accountsGrid}；
}

---

另外，如果要使对话框变大，以便提交按钮不会像那样浮动，这也会非常有用。

从代码中看，您需要为accountsGrid中的className=“row”添加一个新类

var accountsGrid =
    (<div className="container-fluid">
    <div className="row selection-area">

---

在React JS中也有同样的问题。我将添加一个容器类，如：

<div class="row container"</div>

---

}

有什么原因不能在CSS中这样做吗？将

max height

和

overflow-y:auto

添加到网格容器中

<div class="row container"</div>

.container {
   overflow-y: scroll;
   height: 100vh;