下拉许多切断对overflowY设置为自动

Question

我有我的COL-4溢出-y为汽车，当我的下拉是打开它切断了其他山坳后面。当我将它设置为可见而不是自动时，它不会被切断，但我的最大高度参数不再使用。

const scrollStyle = {overflowY: 'auto', maxHeight: '750px', minHeight: '175px'}; 
<Col sm={this.state.pageSettings.pagedCol} style={scrollStyle}> 
    <Row> 
     {this.getPagedRows()} 
    </Row> 
</Col> 

this.getPagedRows =() => { 
     const colSize = colMap[this.state.pageSettings.pagedCol]; 
     const rows = this.props.pagedGuests.map((row, index) => { 
      return(
       <Col sm={colSize} key={index}> 
        <div className="card custom-card"> 
         <div className="card-header bgm-green m-b-20"> 
          <h2 className="card-content title" style={{fontSize: '12px'}}>{row.first_name + ' ' + row.last_name} 
           <small style={{fontSize: '11px'}}>Paged: {row.page_count}</small> 
          </h2> 
          <ul className="actions actions-alt animated flipInX"> 
           <li> 
            <a className="clickable" onClick={()=>this.archiveGuest(row)}> 
             <i className="zmdi zmdi-check"></i> 
            </a> 
           </li> 
           <li> 
            <a className="clickable" onClick={()=>this.pageGuest(row)}> 
             <i className="zmdi zmdi-notifications-active"></i> 
            </a> 
           </li> 
           <li> 
            <a onClick={()=>this.toggleInfo(row)} className="clickable"> 
             <i className="zmdi zmdi-info"></i> 
            </a> 
           </li> 
           <li className="dropdown"> 
            <Dropdown id="dropdown-staff-on"> 
             <Dropdown.Toggle noCaret={true} className="btn btn-sm"> 
              <i className="zmdi zmdi-more-vert"></i> 
             </Dropdown.Toggle> 
             <Dropdown.Menu 
              className="dropdown-menu dropdown-menu-right" 
             > 
              {departmentOptions(row)} 
             </Dropdown.Menu> 
            </Dropdown> 
           </li> 
          </ul> 
         </div> 
         {row.notes ? 
          <div className="card-body card-padding note animated fadeIn"> 
           Notes: {row.notes} 
          </div> : null 
         } 
        </div> 
       </Col> 
      ); 
     }); 
     return rows; 
    }; 

这是我的css。

.custom-card{ 
    position: relative; 
    background: #fff; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
    /*margin-bottom: 30px;*/ 
    border-radius: 2px; 
} 

.custom-card .card-header { 
    position: relative; 
    display: block; 
    /*padding: 26px 30px;*/ 
    padding: 15px 30px; 
    border-radius: 2px 2px 0 0; 
} 

.custom-card .card-header h2 { 
    margin: 0; 
    line-height: 100%; 
    font-size: 16px; 
    font-weight: 400; 
    text-align: center; 
} 

.custom-card .card-header h2 small { 
    display: block; 
    margin-top: 8px; 
    color: #AEAEAE; 
    line-height: 160%; 
} 

.custom-card .card-header.ch-alt:not([class*="bgm-"]) { 
    background-color: #f7f7f7; 
} 

.custom-card .card-header .actions { 
    display: none; 
    z-index: 999 
} 

.custom-card .card-header .btn-float { 
    right: 25px; 
    bottom: -23px; 
    z-index: 1; 
} 

.custom-card .card-header[class*="bgm-"] h2 { 
    color: #fff; 
} 

.custom-card .card-header[class*="bgm-"] h2 small { 
    color: rgba(255, 255, 255, 0.7); 
} 

.custom-card.card-body.card-padding { 
    padding: 26px 30px; 
    padding-bottom: 15px; 
    padding-left: 30px; 
    padding-right: 30px; 
} 

.custom-card .note { 
    padding: 10px 15px; 
    display: none; 
} 

.custom-card .card-header:hover + .note { 
    display: block; 
} 

.custom-card .card-header:hover .actions { 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,1); 
    position:absolute; 
    top:0; 
    left:0; 
    display:inline-block; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    text-align:center; 
    color:white; 
    padding:17px; 
    font-size:14px; 
} 

Answer 1

.WindowStyle .custom-card 
     { 
      position:fixed !important;  
      width:316px; (as per set) 
     }