溢出-在内容容器中不滚动

Question

因此，今天我的应用程序中开始发生有关滚动的怪异事情。我在主容器中将overflow-y设置为auto，以便当内容占据页面的100％以上时，将显示一个滚动条。直到今天，整个星期它的运行情况都很好。除了在return方法内添加google maps模态之外，我没有做任何其他更改。老实说，我不知道它怎么能工作一个星期，然后突然停止工作。现在，无论我尝试什么，我都不会再溢出来滚动了……超级奇怪。

这是我的渲染

render(){
        return(
            <div id="CustomerContainer" style={{width: '100%', height: '100%'}}>
                <div id="CustomerContent" className="fade-in" style={{textAlign: 'center', width: '100%', height: '100%', overflowY: 'auto'}}>

                    <div className="notification-modal fade-in" id="notification-modal">
                        <div className="quote-body" style={{margin: '5% auto'}}>
                            <div className="modalcontent">
                                <div>
                                    <div>
                                        <span><Button color="ata-teal very-small" style={{position: 'relative', left: '47%'}} name="X" click={this.CloseModal.bind(this)}></Button></span>
                                    </div>
                                    <p style={{fontSize: '20px', textAlign: 'center', marginBottom: '10%'}}><b style={{borderBottom: '1px solid black'}}>Did You Know?</b></p>
                                    <ul>
                                        <li>- Click on a Store's ID to see its location on a map</li>
                                        <li>- Click on the ad size button to change sizes</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="store-map-modal" id="store-map-modal">
                        <div className="store-map-body">
                            <div>
                                <span><Button color="ata-teal very-small" style={{position: 'relative', left: '47%', marginBottom: '2%'}} name="X" click={this.CloseMap.bind(this)}></Button></span>
                            </div>

                            <div>
                                <Map google={this.props.google} zoom={13} className="ata-google-map" style={{ position: "relative", width: "40%", height: "40%", overflow: "hidden" }} initialCenter={{ lat: this.state.Lat, lng: this.state.Long }} center={{ lat: this.state.Lat, lng: this.state.Long}}>
                                    <Marker name={'Store Location'} position={{ lat: this.state.Lat, lng: this.state.Long}}></Marker>
                                </Map>
                            </div>
                        </div>
                    </div>

                    <div id="Welcome" style={this.state.CurrStep == 2 ? {display: 'none'} : {marginTop: '5%'}}>
                        <p style={{fontSize: '35px', fontWeight: 'bold'}}>{this.state.CustomerFirst + " " + this.state.CustomerLast}</p>
                        <p style={{fontSize: '20px', color: 'orange'}}><b>Your Quote Is Almost Ready!</b></p>
                    </div>

                    <div id="finish" style={this.state.CurrStep == 2 ? {marginTop: '5%', marginBottom: '5%', display: 'block'} : {display: 'none'}}>
                        <p style={{fontSize: '35px', fontWeight: 'bold'}}>{this.state.CustomerFirst + " " + this.state.CustomerLast}</p>
                        <p style={{fontSize: '20px', color: '#04837B'}}><b>Your Quote Is Ready!</b></p>
                    </div>

                    {/*
                    <div style={this.state.CurrStep == 3 ? {display: 'none'} : {marginTop: '5%', color: '#0F9D58', fontSize: '37px'}}>
                        <p><b>Step: {this.state.CurrStep}</b></p>
                    </div>
                    */}

                    <div id="InnerContainer" style={{width: '80%', marginLeft: 'auto', marginRight: 'auto', marginTop: '5%'}}>
                        {this.RenderStoreSelect(this.state.CurrStep)} 
                        {/*this.RenderAdSelection(this.state.CurrStep)*/}
                        {this.RenderSummary(this.state.CurrStep)}
                    </div>

                    {this.OpenNotification()}

                </div>
            </div>
        )
    }
}

这是我的css文件：

.notification-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 75%;
  width: 25%; /* Full width */
  height: 25%; /* Full height */
}

/* Modal Content/Box */
.modalbody {
  background-color: #fefefe;
  display: block;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border-radius: 6px;
  box-shadow: 2px 2px 8px;
  width: 480px; /* Could be more or less, depending on screen size */
}

.quote-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content/Box */
.quote-body {
  background-color: #fefefe;
  display: block;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border-radius: 6px;
  width: 342px; /* Could be more or less, depending on screen size */
  box-shadow: 2px 2px 8px;
}

.store-map-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

.store-map-body {
  background-color: #fefefe;
  display: block;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 11px;
  border-radius: 6px;
  width: 40%; /* Could be more or less, depending on screen size */
  height: 46%;
  box-shadow: 2px 2px 8px;
}

#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  #customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
    cursor: auto;
  }

  #customers table {box-shadow: 2px 2px 7px grey;}

  #customers tr:nth-child(even){background-color: #f2f2f2;}

  #customers tbody tr:hover {background-color: orange;}

  #customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #04837B;
    color: white;
  }

  #customers tfoot td{
      background-color: none;
      border: none;
      cursor: auto;
      color: black;
  }

  .check-box{
      cursor: pointer;
  }

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1.5s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

如果有人知道CSS近期是否有所更改，或者我完全忽略了某些内容，我将不胜感激！谢谢。

Answer 1

不确定为什么这样或为什么我必须这样做，但是在#CustomerContent上指定顶部和左侧分配为零的绝对位置似乎可以完成工作：

render(){
        return(
            <div id="CustomerContainer" style={{width: '100%', height: '100%'}}>
                <div id="CustomerContent" className="fade-in" style={{textAlign: 'center', width: '100%', height: '100%', overflowY: 'auto', position: 'absolute', top: '0', left: '0'}}>

                    <div className="notification-modal fade-in" id="notification-modal">
                        <div className="quote-body" style={{margin: '5% auto'}}>
                            <div className="modalcontent">
                                <div>
                                    <div>
                                        <span><Button color="ata-teal very-small" style={{position: 'relative', left: '47%'}} name="X" click={this.CloseModal.bind(this)}></Button></span>
                                    </div>
                                    <p style={{fontSize: '20px', textAlign: 'center', marginBottom: '10%'}}><b style={{borderBottom: '1px solid black'}}>Did You Know?</b></p>
                                    <ul>
                                        <li>- Click on a Store's ID to see its location on a map</li>
                                        <li>- Click on the ad size button to change sizes</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="store-map-modal" id="store-map-modal">
                        <div className="store-map-body">
                            <div>
                                <span><Button color="ata-teal very-small" style={{position: 'relative', left: '47%', marginBottom: '2%'}} name="X" click={this.CloseMap.bind(this)}></Button></span>
                            </div>

                            <div>
                                <Map google={this.props.google} zoom={13} className="ata-google-map" style={{ position: "relative", width: "40%", height: "40%", overflow: "hidden" }} initialCenter={{ lat: this.state.Lat, lng: this.state.Long }} center={{ lat: this.state.Lat, lng: this.state.Long}}>
                                    <Marker name={'Store Location'} position={{ lat: this.state.Lat, lng: this.state.Long}}></Marker>
                                </Map>
                            </div>
                        </div>
                    </div>

                    <div id="Welcome" style={this.state.CurrStep == 2 ? {display: 'none'} : {marginTop: '5%'}}>
                        <p style={{fontSize: '35px', fontWeight: 'bold'}}>{this.state.CustomerFirst + " " + this.state.CustomerLast}</p>
                        <p style={{fontSize: '20px', color: 'orange'}}><b>Your Quote Is Almost Ready!</b></p>
                    </div>

                    <div id="finish" style={this.state.CurrStep == 2 ? {marginTop: '5%', marginBottom: '5%', display: 'block'} : {display: 'none'}}>
                        <p style={{fontSize: '35px', fontWeight: 'bold'}}>{this.state.CustomerFirst + " " + this.state.CustomerLast}</p>
                        <p style={{fontSize: '20px', color: '#04837B'}}><b>Your Quote Is Ready!</b></p>
                    </div>

                    {/*
                    <div style={this.state.CurrStep == 3 ? {display: 'none'} : {marginTop: '5%', color: '#0F9D58', fontSize: '37px'}}>
                        <p><b>Step: {this.state.CurrStep}</b></p>
                    </div>
                    */}

                    <div id="InnerContainer" style={{width: '80%', marginLeft: 'auto', marginRight: 'auto', marginTop: '5%'}}>
                        {this.RenderStoreSelect(this.state.CurrStep)} 
                        {/*this.RenderAdSelection(this.state.CurrStep)*/}
                        {this.RenderSummary(this.state.CurrStep)}
                    </div>

                    {this.OpenNotification()}

                </div>
            </div>
        )
    }
}

我发布此答案是因为它是快速解决方案，但是我仍然想知道是否有人知道为什么我的overflowY: 'auto'无法正常工作。