How do I limit the size of my React component and add scrolling?

Question

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:

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:

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.

Answer 1

从代码中看起来你需要为className =＆＃34; row＆＃34;添加一个新类。在accountsGrid中。

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

看到添加了新课程＆＃39; selection-area＆＃39;并添加宽度为＆＃39; GEMSelector＆＃39;

高度两倍的溢出

.selection-area{
     overflow: scroll;
     height: 300px;
}

Answer 2

在 React JS 中遇到了同样的问题。我会添加一个容器类，例如：

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

然后为该容器类添加样式：

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

}