sbruchmann · August 29, 2015 14:20
diff --git a/split.css b/split.css
 * {
  box-sizing: border-box;
 }

 *::before,
 *::after {
  box-sizing: inherit;
 }

 .container {
  height: 500px;
  border: 2px solid grey;
  position:relative;
 }

 .split {
  display: flex;
  height: 100%;
  border: 1px solid black;
 }

 .split > :nth-child(1) {
  overflow: scroll;
 }

 .split > :nth-child(2) {
    flex-grow: 1;
 }

 /* Vertical */

 .split.vertical {
  flex-direction: column;
 }

 .split.vertical > :nth-child(1) {
  resize: vertical;
 }

 /* Horizontal */

 .split.horizontal {
  flex-direction: row;
 }

 .split.horizontal > :nth-child(1) {
  resize: horizontal;
 }




 .split div {
  padding: 5px;
  border: 1px dashed black;
 }
diff --git a/split.html b/split.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Split panels</title>
 </head>
 <body>
 <div class="container">
  <div class="split horizontal">
    <div class="split vertical">
      <div>
        A
      </div>
      <div>
        B
      </div>
    </div>
    <div>
      C
    </div>
  </div>
 </div>
  
 </body>
 </html>