Как ограничить размер моего компонента React и добавить прокрутку?

Question

У меня есть динамическое число кнопок, которые мне нужно отображать в зависимости от пользователя. В этом диалоговом окне им нужно выбрать один из вариантов и отправить. моя цель состоит в том, чтобы сделать его похожим на это, показывая не более 4 кнопок, с возможностью прокрутки остальные:

Однако, если есть более 4 кнопок доступны, кнопки идут закадровые и становится невозможным доступ, даже если пользователь прокручивает вниз страницы за пределами диалогового окна:

Я хотел бы перестроить свой код так, что у меня есть среагировать компонент ограничен размером, чтобы показывать только 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}; 
    } 

Кроме того, если есть в любом случае, чтобы сделать окно больше, так что представить кнопки просто не плавают так, это тоже очень полезно.

Answer 1

Из кода, похоже, вам нужно добавить новый класс для классаName = "row" в accountsGrid.

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

Смотрите, что новый класс добавляется «выбор-область» и добавить переполнение шириной в два раза высота «GEMSelector»

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