title: Flexible pane exceed 100% height
body: <p>It's basically <strong>CSS question</strong>, but since it's wrapped inside React, I tagged it as React as well.</p>
  
  <p>Demo to my problem: <a href="https://codesandbox.io/s/compassionate-bartik-z9lev" rel="nofollow noreferrer">https://codesandbox.io/s/compassionate-bartik-z9lev</a>
  (Those who don't know React, just watch the live demo and use for example Google Chrome's F12 panel to see the elements and styles)</p>
  
  <p>So basically I have two main sections in my app, the <code>top</code> one and <code>bottom</code> one, and a flexible divider that you can resize them.</p>
  
  <p>My goal is to eventually make my <code>bottom</code> section to a chat, so I made it's <code>overflow: scroll</code>.</p>
  
  <p><strong><em>But the weird situation is</em></strong>: when I resize it towards down, the bottom section height become larger than the screen, which cause the overflow to not be true.</p>
  
  <p>An image example ( watch the bottom part ):
  <a href="https://i.imgur.com/kZEmpt2.png" rel="nofollow noreferrer">https://i.imgur.com/kZEmpt2.png</a></p>
  
  <p>So basically I want the bottom's height to always be 100% relative to the top part and the whole screen, and if there is more text than it could hold, so the <code>overflow: scroll</code> will be activated.</p>
  
  <p>I tried ( once again, via F12 ) to change the style of many elements there so it will work fine, but I couldn't achieve that goal.</p>
  
  <p>Without the live demo:</p>
  
  <p><strong>Full Code</strong>:</p>
  
  <p><code>App.js</code></p>
  
  <pre><code>import React from "react";
  import "./styles.css";
  import SplitPane from "react-split-pane";
  
  export default function App() {
    return (
      &lt;SplitPane split="horizontal"&gt;
        &lt;div&gt;test&lt;/div&gt;
        &lt;div style={{ overflow: "scroll" }}&gt;
          &lt;LongText /&gt;
        &lt;/div&gt;
      &lt;/SplitPane&gt;
    );
  }
  </code></pre>
  
  <p><code>styles.css</code> ( for the divider ):</p>
  
  <pre><code>body {
    margin: 0;
  }
  .Resizer {
    background: rgb(66, 66, 66);
    opacity: 1;
    z-index: 1;
    box-sizing: border-box;
    transition: all 0.3s ease;
  }
  
  .Resizer.vertical::after {
    content: "";
    height: 100%;
    margin-left: -5px;
    top: 0px;
    width: 11px;
    z-index: 10;
    position: absolute !important;
  }
  
  .Resizer.horizontal::after {
    content: "";
    width: 100%;
    margin-top: -5px;
    height: 11px;
    z-index: 10;
    position: absolute !important;
  }
  
  .Resizer:hover {
    background: rgb(224, 224, 224);
  }
  
  .Resizer.horizontal {
    height: 1px;
    cursor: row-resize;
    width: 100%;
  }
  
  .Resizer.horizontal:hover {
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.5);
  }
  
  .Resizer.vertical {
    width: 1px;
    cursor: col-resize;
  }
  
  .Resizer.vertical:hover {
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.5);
  }
  
  .Resizer.disabled {
    cursor: not-allowed;
  }
  .Resizer.disabled:hover {
    border-color: transparent;
  }
  
  </code></pre>
  
  <p>Explanation ( about <code>App.js</code> ):</p>
  
  <p>The first child: <code>&lt;div&gt;Top&lt;/div&gt;</code> is the top one, and the second <code>&lt;div&gt;</code> is the bottom part ( which the long text inside )</p>
  
  <p>There is also CSS file in the <code>codesandbox</code> demo link I sent, that handles the divider style.</p>