我有动态的按钮数量，我需要根据用户呈现。在此对话框中，他们需要选择其中一个选项并提交。我的目标是让它看起来像这样，最多显示4个按钮，并能够滚动其余的按钮：

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

我想重新构造我的代码，以便我有一个大小限制的react组件，一次只能显示4个，确保整个屏幕停留在页面上。
我已经将代码存储在这个JSFiddle中：https://jsfiddle.net/connorcmu/f01xhsat/1/
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};
  }

此外，如果有任何方法可以使对话框更大，这样提交按钮就不会像那样浮动，这将是非常有帮助的。