https://s3-ap-northeast-1.amazonaws.com/hokaccha/tmp/react-flex-frame/index.html

app.js

import React from 'react';
import { Frame, FrameSet } from './react-flex-frame';

class App extends React.Component {
  render() {
    return (
      <FrameSet direction="row">
        <Frame width="300"  resiable={true} className="side">
          <h1>Side Bar</h1>
        </Frame>
        <FrameSet direction="column" width="auto">
          <Frame height="200" resiable={true} className="mainTop">
            <h2>Main Top</h2>
          </Frame>
          <Frame height="auto" className="mainBottom">
            <h2>Main Bottom</h2>
          </Frame>
        </FrameSet>
      </FrameSet>
    );
  }
}

export default App;

react-flex-frame.js

import React from 'react';
import ReactDOM from 'react-dom';

export class FrameSet extends React.Component {
  render() {
    let style = {
      display: 'flex',
      flexDirection: this.props.direction,
      position: 'relative',
    };
    if (this.props.height === 'auto' || this.props.width === 'auto') {
      style.flex = 1;
    }
    else if (this.props.width) {
      style.width = `${this.props.width}px`;
    }
    else if (this.props.height) {
      style.height = `${this.props.height}px`;
    }
    return <div style={style}>
      {this.props.children}
    </div>;
  }
}

export class Frame extends React.Component {
  handleResizeStart(e) {
    e.preventDefault();
    let el = ReactDOM.findDOMNode(this);
    let param = this.props.width ? el.clientWidth : el.clientHeight;
    let posProp = this.props.width ? 'pageX' : 'pageY';
    let pos = e[posProp];
    let handleResize = (e) => {
      let newParam = param + (e[posProp] - pos);
      if (newParam < 0) newParam = 0;
      el.style[this.props.width ? 'width' : 'height'] = `${newParam}px`;
    };
    let handleResizeStop = () => {
      document.removeEventListener('mouseup', handleResizeStop);
      document.removeEventListener('mousemove', handleResize);
    };
    document.addEventListener('mousemove', handleResize);
    document.addEventListener('mouseup', handleResizeStop);
  }

  render() {
    let style = { position: 'relative' };
    if (this.props.height === 'auto' || this.props.width === 'auto') {
      style.flex = 1;
    }
    else if (this.props.width) {
      style.width = `${this.props.width}px`;
    }
    else if (this.props.height) {
      style.height = `${this.props.height}px`;
    }
    if (this.props.resiable) {
      let style = {
        position: 'absolute',
      }
      if (this.props.width) {
        Object.assign(style, {
          right: '0',
          top: '0',
          width: '5px',
          height: '100%',
          cursor: 'col-resize',
        });
      }
      else {
        Object.assign(style, {
          left: '0',
          bottom: '0',
          width: '100%',
          height: '5px',
          cursor: 'row-resize',
        });
      }
      this.resizeBar = <div style={style} onMouseDown={this.handleResizeStart.bind(this)}></div>;
    }
    return <div style={style} className={this.props.className}>
      {this.props.children}
      {this.resizeBar}
    </div>;
  }
}