React list of elements not scrolling
14,121
Instead of using overflow: 'scroll'
set overflow: 'auto'
, event if you set the height
of the parent proper scroll bar
will come.
Check this example:
class App extends React.Component{
render(){
return(<div style={{ margin: 15, marginLeft: 35 }}>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<div style={{ marginRight: 10 }}>
Lorem Ipsum
</div>
<div style={{overflow: 'auto', height: 'inherit', display: 'block', maxWidth: 300, marginLeft: 20,}}>
<div> Item visible</div>
<div> Item visible</div>
<div> Item visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
</div>
</div>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>
Comments
-
R01010010 almost 2 years
I have a div with a list of elements created on the render method of a component. The style of the container has
overflow: scroll
however the scroll doesn't show anything else than the initially visible items. I wonder if this behaviour is expected in react and how to fix it.<div style={{ margin: 15, marginLeft: 35 }}> <div style={{ display: 'flex', flexDirection: 'row' }}> <div style={{ marginRight: 10 }}> Lorem Ipsum </div> <div style={{ display: 'block', maxWidth: 300, marginLeft: 20, overflow: 'scroll' }}> <div> Item visible </div> <div> Item visible </div> <div> Item visible </div> <div> Item visible </div> <div> Item NOT visible </div> <div> Item NOT visible </div> <div> Item NOT visible </div> <div> Item NOT visible </div> <div> Item NOT visible </div> <div> Item NOT visible </div> <div> Item NOT visible </div> <div> Item NOT visible </div> </div> </div> </div>