html - 下拉菜单在 overflowY 设置为自动时有很多中断

Question

我的 col-4 上的 overflow-y 是自动的，当我的下拉列表打开时，它会在另一个 col 后面切断。当我将它设置为 ti visible 而不是 auto 时，它不会被切断，但我的 max-height 参数不再使用。

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)
        }