title: height:100% works in Chrome but not in Safari
body: <p>I have made a <a href="https://plnkr.co/edit/57gkUC08wVShhR0jSF6s?p=preview" rel="noreferrer">splitter</a> which works perfectly in Chrome.</p>
  
  <p>However, it does not work in Safari. But if we change the height in <code>.handle-inner</code> from <code>100%</code> to <code>400px</code>, we will observe that the splitter (from the top down to <code>400px</code>) becomes draggable. That means it is <code>height:100%</code> which did not work in Safari.</p>
  
  <p>Does anyone know how to amend the code to make the splitter work in both Chrome and Safari?</p>
  
  <p><strong>Edit 1:</strong> </p>
  
  <p>I made a more complex example which has similar structure as my real program. In my real program, I do not fix the height as <code>500px</code>, I use the whole screen, and don't want to exceed it. Here is the <a href="https://plnkr.co/edit/iub4CUuZSGkwDBLwJMzP?p=preview" rel="noreferrer">splitter</a> which works perfectly in Chrome, but <code>height:100%</code> does not work in Safari.</p>
  
  <p>Here is the <a href="https://plnkr.co/edit/GdAewaF2olVplcYn5EEs?p=preview" rel="noreferrer">version</a> with <code>height: 100vh</code>. We could see the height is too much in both Chrome and Safari. However, we do NOT know how to set <code>max-height</code>.</p>