Dead simple panes splitter control based on flexbox.

Demo

• Declarative.
  Just add an attribute to the DOM element. Don't need to write any JavaScript.
• Lightweight.
  JS + CSS < 1kB (gzipped) with no dependencies.
• Maintainable. Ah, maybe.
  The source code contains only 65 lines of TypeScript code and 43 lines of Stylus code.
  If you don't like it partially, you can clone it and make changes.

$ npm i flex-splitter-directive

import "flex-splitter-directive"
import "flex-splitter-directive/styles.min.css"

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

• index.min.js
• styles.min.css

1. Load CSS and JS.
2. Set data-flex-splitter-horizontal (or data-flex-splitter-vertical for vertical) attribute to the parent element of the panes.
3. Insert <div role="separator"></div> between each pane.
4. Set the following styles for each pane as required:
   • width / height for the initial size.
   • min-width / min-height for the minimum size.
   • max-width / max-height for the maximum size.
   • flex: auto for filling space.

WTFPL

• Split (nathancahill/split)
• Splitter (andrienko/splitter)
• SplitMe (alesgenova/split-me)