List 不滚动的元素列表

我有一个div，其中包含在组件的render方法上创建的元素列表。容器的样式有溢出：滚动，但是滚动只显示最初可见的项目。我想知道react中是否会出现这种行为，以及如何修复它

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

乱数假文
可见项
可见项
可见项
可见项
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见

不要使用

溢出：“滚动”

设置

溢出：“自动”

，如果您设置了父级正确的

滚动条的
高度，事件将出现

检查此示例：


类应用程序扩展了React.Component{
render（）{
返回(
乱数假文
可见项
可见项
可见项
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
项目不可见
)
}
}
ReactDOM.render（，document.getElementById（'app'））

您的父组件是否设置了高度？@corvid我已将代码更新为更真实的高度。为父组件设置高度解决了此问题。设置父组件的分区高度（例如：height:100vh；）使滚动条出现