Html 溢出-y未在内容容器中滚动

所以今天在我的应用程序中发生了一些奇怪的关于滚动的事情。我在主容器中将

overflow-y

设置为自动，这样当内容占据页面的100%以上时，就会出现一个滚动条。到今天为止，它整个星期都运转得很好。除了在我的返回方法中添加一个GoogleMaps模式外，我没有做任何更改。我真的不知道它怎么可能只工作一周，然后突然停止工作。现在无论我尝试什么，我都不能再让溢出来滚动了。。。太奇怪了

这是我的作品

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有什么变化，或者我完全忽略了什么，我将不胜感激！谢谢。

我不知道为什么会这样做，或者为什么我必须这样做，但指定绝对位置时，将“上”和“左”指定为“零”#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>
        )
    }
}

render（）{
返回(
你知道吗


-单击商店的ID以查看其在地图上的位置
-单击“广告尺寸”按钮更改尺寸

{this.state.CustomerFirst+“”+this.state.CustomerLast}
您的报价几乎准备好了
{this.state.CustomerFirst+“”+this.state.CustomerLast}
您的报价已经准备好了
{/*
步骤：{this.state.CurrStep}

*/}
{this.RenderStoreSelect（this.state.CurrStep）}
{/*this.renderSelection（this.state.CurrStep）*/}
{this.RenderSummary（this.state.CurrStep）}
{this.OpenNotification（）}
)
}
}

---

我发布这个答案是因为这是一个快速修复方法，但我仍然想知道是否有人知道为什么我的

溢出：“auto”

不起作用。

请粘贴生成html的代码以创建一个可用的示例。另外，如果你删除了你的更新，它会起作用吗？@Huangism删除更新不会起任何作用。由于某种原因仍然无法滚动。

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