title: How to support scrolling for individual panes separately in react-split-pane?
body: <p>I  am using react split pane components. But I have to support seperate scrolling for both the components . But applying styling to separate panes with overflowY: scroll is not working</p>
  <p>Below is given code.</p>
  <p>The short code snippet where all problem lies is</p>
  <pre class="lang-js prettyprint-override"><code>&lt;SplitPane split=&quot;vertical&quot; primary='first' minSize={300} defaultSize={700}  /*style={{overflowX: 'hidden' ,overflowY: 'hidden'}}*/ &gt;
              &lt;div style={{overflowX: 'hidden' ,overflowY: 'scroll'}}&gt;&lt;Navigator hints={ this.state.hints } statement= { this.state.statement } editorial= { this.state.editorial } submissions= { this.state.submissions }/&gt;&lt;/div&gt;
              &lt;Pane style={{overflowX: 'hidden' ,overflowY: 'scroll'}}&gt; 
  </code></pre>
  <pre><code>/* eslint-disable no-unused-vars*/
  import React, { Component } from 'react'
  // eslint-disable-next-line no-unused-vars
  import SplitPane, { Pane } from 'react-split-pane'
  import Split from 'react-split'
  import IDE from './IDE'
  import INPUT from './input_component'
  import OUTPUT from './output_component'
  import '../css/problem_page.css'
  import Navigator from './problem_navigator'
  import stat from '../Introduction.md'
  import ed from '../markdowns/ed.md'
  import h1 from '../markdowns/h1.md'
  import h2 from '../markdowns/h2.md'
  import h3 from '../markdowns/h3.md'
  class Problem extends Component {
      state = {
          input: 'INPUT HERE', output: 'OUTPUT HERE', code: '', verdict: 'No submissions made recently', vcolor:'yellow', 
          statement:'TO BE TRANSFERRED FROM MD FILE',
          editorial:'TO BE MADE SOON',
          submissions: 'NO SUBMISSIONS YET',
          hints: []
        }
        componentWillMount() {
          fetch(stat).then((response) =&gt; response.text()).then((text) =&gt; {
            this.setState({ statement: text });
          })
          fetch(ed).then((response) =&gt; response.text()).then((text) =&gt; {
            this.setState({editorial:text});
          })
          fetch(h1).then((response) =&gt; response.text()).then((text) =&gt; {
            var hints=this.state.hints;
            hints.push(text);
            this.setState({hints:hints});
          })
          fetch(h2).then((response) =&gt; response.text()).then((text) =&gt; {
            var hints=this.state.hints;
            hints.push(text);
            this.setState({hints:hints});
          })
          fetch(h3).then((response) =&gt; response.text()).then((text) =&gt; {
            var hints=this.state.hints;
            hints.push(text);
            this.setState({hints:hints});
          })
        }
        inputChange = (e) =&gt; {
          this.setState({ input: e.target.value })
        }
        codeChange = (value) =&gt; {
          this.setState({ code: value })
        }
        runIDE = (e) =&gt; {
          console.log(this.state.code + ' \n' + this.state.input + ' \n' + this.state.output)
        }
        evaluate =(e) =&gt; {
  
        }
    render () {
      return (
              &lt;SplitPane split=&quot;vertical&quot; primary='first' minSize={300} defaultSize={700}  style={{overflowX: 'hidden' ,overflowY: 'hidden', display: 'flex', flexDirection: 'row' }} &gt;
              &lt;Pane style={{ overflowY: 'scroll'}}&gt;&lt;Navigator hints={ this.state.hints } statement= { this.state.statement } editorial= { this.state.editorial } submissions= { this.state.submissions }/&gt;&lt;/Pane&gt;
              &lt;Pane style={{ overflowY: 'scroll'}}&gt;
              &lt;div style={{ backgroundColor: '#5b6467', backgroundImage: 'linear-gradient(315deg, #5b6467 0%, #8b939a 74%)'}}&gt;
             
              &lt;IDE change={this.codeChange.bind(this)}/&gt; 
                &lt;div style={{height:'6vh',width:'150vh',display:'flex',flexDirection: 'row'}}&gt;
                  &lt;button  type='submit' class='btn btn-primary' style={{ marginLeft: '10px', marginTop: '10px', fontWeight: 'bold' }} onClick={this.runIDE}&gt;
                  Custom Run
                  &lt;/button&gt;
  
                  &lt;button type='submit' class='btn btn-success' style={{ marginLeft: '20px', marginTop: '10px', fontWeight: 'bold' }} onClick={this.evaluate}&gt;
                  Evaluate
                  &lt;/button&gt;
  
                  &lt;textarea className='form-control' value={this.state.verdict} style={{ height: '4vh', width: '70vh', marginLeft: '20vh', marginTop: '13px', borderRadius: '10px',backgroundColor:this.state.vcolor}}&gt;
                  &lt;/textarea&gt;
                  &lt;/div&gt;
  
                  &lt;div style={{height:'26vh',width:'150vh',display:'flex',flexDirection: 'row'}}&gt;
                  &lt;INPUT inp={this.state.input} hgt='23vh' wdt='60vh' inpu={this.inputChange.bind(this)} /&gt;
                   &lt;OUTPUT out={this.state.output} hgt='23vh' wdt='60vh'/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/Pane&gt;
          &lt;/SplitPane&gt;
      )
    }
  }
  export default Problem
  
  </code></pre>
  <p>Can anyone help me to support scrolling separately for individual panes inside react-split-pane.</p>
  <p>I tried stack overflowing the answer but I was not able to find a good answer</p>
  <p>docs link for <a href="https://www.npmjs.com/package/react-split-pane" rel="nofollow noreferrer">react-split-pane</a></p>
  <p>Please help me solving this issue.</p>
  <p>Output from my local host
  <a href="https://i.stack.imgur.com/AjmVd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AjmVd.png" alt="noscrolling-see left and right panes separately" /></a></p>
  <p><strong>UPD Solved using @Anishs answer's</strong></p>
  <p>using the following updated code .</p>
  <pre><code>&lt;SplitPane split=&quot;vertical&quot; primary='first' minSize={300} defaultSize={700}  style={{ position:'relative' , overflow:'hidden' }} &gt;
                &lt;Pane style={{ height: '119vh', overflowY: 'scroll', overflowX:'hidden' }}&gt;
                &lt;Navigator hints={ this.state.hints } statement= { this.state.statement } editorial= { this.state.editorial } submissions= { this.state.submissions }/&gt;
                &lt;/Pane&gt;
              &lt;Pane&gt;
              &lt;div style={{ backgroundColor: '#5b6467', backgroundImage: 'linear-gradient(315deg, #5b6467 0%, #8b939a 74%)'}}&gt;
             
  </code></pre>
  <p>by simply adding height to the part in which scrolling is to be done.</p>