I have dynamic number of buttons I need to render depending on the user. During this dialog box, they need to select one of the options and submit. my goal is to make it look like this, showing at most 4 buttons, with the ability to scroll through the rest:

[![enter image description here](https://i.stack.imgur.com/1Pd7F.png)](https://i.stack.imgur.com/1Pd7F.png)

However, if there are more than 4 buttons available, the buttons go offscreen and become impossible to access, even if the user scrolls down the page outside of the dialog box:

[![enter image description here](https://i.stack.imgur.com/y8tOc.png)](https://i.stack.imgur.com/y8tOc.png)

I would like to restructure my code so that I have a react component limited in size to only show 4 at once, ensuring the entire screen stays on the page.

I have stored my code at this JSFiddle: <https://jsfiddle.net/connorcmu/f01xhsat/1/>

renderDialog and renderButtons are the relevant sections here:

```
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};
  }

```

Also, if there is anyway to make the dialog box bigger so that the submit buttons just don't float like that, that would be very helpful too.