Javascript 如何支持在react split pane中单独滚动各个窗格？

我正在使用react拆分窗格组件。但我必须支持两个组件的单独滚动。但是使用overflowY:scroll将样式应用于单独的窗格不起作用

下面是给出的代码

所有问题所在的简短代码片段是

/*eslint禁用未使用的变量*/
从“React”导入React，{Component}
//eslint禁用下一行无未使用的变量
从“反应拆分窗格”导入拆分窗格，{Pane}
从“反应拆分”导入拆分
从“/IDE”导入IDE
从“./INPUT\u组件”导入输入
从“./OUTPUT\u组件”导入输出
导入“../css/problem\u page.css”
从“./problem\u Navigator”导入导航器
从“../Introduction.md”导入stat
从“../markdowns/ed.md”导入ed
从“../markdowns/h1.md”导入h1
从“../markdowns/h2.md”导入h2
从“../markdowns/h3.md”导入h3
类问题扩展组件{
状态={
输入：'input HERE'，输出：'output HERE'，代码：''，裁决：'No submissions Neurly'，vcolor:'yellow'，
语句：'将从MD文件传输'，
社论：“很快就要做了”，
意见书：'还没有意见书'，
提示：[]
}
组件willmount（）{
获取（stat）.然后（（response）=>response.text（））。然后（（text）=>{
this.setState（{statement:text}）；
})
fetch（ed）.然后（（response）=>response.text（））。然后（（text）=>{
this.setState（{编辑：text}）；
})
获取（h1）。然后（（响应）=>response.text（））。然后（（文本）=>{
var-hints=this.state.hints；
提示。推送（文本）；
this.setState（{hints:hints}）；
})
获取（h2）。然后（（响应）=>response.text（））。然后（（文本）=>{
var-hints=this.state.hints；
提示。推送（文本）；
this.setState（{hints:hints}）；
})
获取（h3）。然后（（响应）=>response.text（））。然后（（文本）=>{
var-hints=this.state.hints；
提示。推送（文本）；
this.setState（{hints:hints}）；
})
}
输入更改=（e）=>{
this.setState（{input:e.target.value}）
}
编解码器=（值）=>{
this.setState（{code:value}）
}
runIDE=（e）=>{
console.log（this.state.code+'\n'+this.state.input+'\n'+this.state.output）
}
评估=（e）=>{
}
渲染（）{
返回(
定制运行
评估
)
}
}
导出默认值问题

有人能帮我支持在react split窗格中单独滚动各个窗格吗

我试图用堆栈溢出答案，但没能找到一个好答案

文档链接

请帮我解决这个问题

来自本地主机的输出

使用@Anishs答案解决UPD问题

使用以下更新的代码

<SplitPane split="vertical" primary='first' minSize={300} defaultSize={700}  style={{ position:'relative' , overflow:'hidden' }} >
              <Pane style={{ height: '119vh', overflowY: 'scroll', overflowX:'hidden' }}>
              <Navigator hints={ this.state.hints } statement= { this.state.statement } editorial= { this.state.editorial } submissions= { this.state.submissions }/>
              </Pane>
            <Pane>
            <div style={{ backgroundColor: '#5b6467', backgroundImage: 'linear-gradient(315deg, #5b6467 0%, #8b939a 74%)'}}>
           

---

通过简单地向要进行滚动的部分添加高度。

您缺少height CSS属性

---

Ya我现在修复了它，因为高度不受限制。谢谢

<SplitPane split="vertical" primary='first' minSize={300} defaultSize={700}  style={{ position:'relative' , overflow:'hidden' }} >
              <Pane style={{ height: '119vh', overflowY: 'scroll', overflowX:'hidden' }}>
              <Navigator hints={ this.state.hints } statement= { this.state.statement } editorial= { this.state.editorial } submissions= { this.state.submissions }/>
              </Pane>
            <Pane>
            <div style={{ backgroundColor: '#5b6467', backgroundImage: 'linear-gradient(315deg, #5b6467 0%, #8b939a 74%)'}}>