title: Resizable Sidebar - Drag To Resize
body: <p>I am trying to create a layout which allows you to resize the sidebar by dragging one edge of it.  This behavior can be seen in CodePen/CodeSandbox, etc.. - you can drag each 'code window' to resize it.  I am looking for this same behavior but with the page layout.</p>
  
  <p><a href="https://i.stack.imgur.com/9VBeK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9VBeK.png" alt="enter image description here"></a></p>
  
  <p>What I have come up with allows me to drag to resize, but if there is a lot of content within the 'main' area (area that is not the sidebar) it throws off the drag.</p>
  
  <p>I want to be able to drag all the way to the edge of the screen, regardless of the content within.</p>
  
  <p>I think the best way to show this issue is by a demo:</p>
  
  <p><strong><em>Original Demo:</em></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const resizer = document.querySelector("#resizer");
  const sidebar = document.querySelector("#sidebar");
  
  resizer.addEventListener("mousedown", (event) =&gt; {
    document.addEventListener("mousemove", resize, false);
    document.addEventListener("mouseup", () =&gt; {
      document.removeEventListener("mousemove", resize, false);
    }, false);
  });
  
  function resize(e) {
    const size = `${e.x}px`;
    sidebar.style.width = size;
  }
  
  /** 
   * Helpers 
   */
  
  sidebar.style.width = '325px';
  const mainContent = document.querySelector("#main-content");
  
  function addContent() {
    const mainContentStr = [...Array(10).keys()].map(i =&gt; "Main Content");
    mainContent.innerHTML += mainContentStr.join(' ') + '&lt;br /&gt;&lt;br /&gt;&lt;h1&gt;Now drag to see how difficult it is, remove content to see how easy it is&lt;/h1&gt;';
  }
  
  function removeContent() {
    mainContent.innerHTML = '';
  }
  
  document.querySelector("#add-content")
    .addEventListener('click', () =&gt; addContent())
  
  document.querySelector("#remove-content")
    .addEventListener('click', () =&gt; removeContent())</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    position: relative;
    height: auto;
    min-height: 100vh;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    overflow: hidden;
    margin: 0;
  }
  
  #wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  #container {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #sidebar {
    height: 100%;
    position: relative;
    margin 0;
    padding: 0;
    box-sizing: border-box;
    background: lightgray;
    border: 2px solid darkgray;
  }
  
  #resizer {
    position: relative;
    z-index: 2;
    width: 18px;
    cursor: col-resize;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(0, 0, 0, 0.4);
    background: #333642;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #main {
    background: lightblue;
    height: 100%;
    flex-grow: 1;
    flex-direction: row;
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  #add-content {
    width: 80px;
    float: right;
    background-color: forestgreen;
  }
  
  #remove-content {
    width: 80px;
    float: right;
    background-color: salmon;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div id="container"&gt;
      &lt;div id="sidebar"&gt;
        &lt;p&gt;Sidebar content&lt;/p&gt;
        &lt;button id="add-content"&gt;Add Content&lt;/button&gt;
        &lt;button id="remove-content"&gt;Remove Content&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="resizer"&gt;&lt;/div&gt;
      &lt;div id="main"&gt;
        &lt;p id="main-content"&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong><em>Updated Demo:</em></strong></p>
  
  <p><strong>After adding buttons, they appear stretched vertically 100%</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const resizer = document.querySelector("#resizer");
  const sidebar = document.querySelector("#sidebar");
  
  resizer.addEventListener("mousedown", (event) =&gt; {
    document.addEventListener("mousemove", resize, false);
    document.addEventListener("mouseup", () =&gt; {
      document.removeEventListener("mousemove", resize, false);
    }, false);
  });
  
  function resize(e) {
    const size = `${e.x}px`;
    sidebar.style.flexBasis = size;
  }
  
  /** 
   * Helpers 
   */
  
  sidebar.style.flexBasis = '325px';
  const mainContent = document.querySelector("#main-content");
  
  function addContent() {
    const mainContentStr = [...Array(10).keys()].map(i =&gt; "Main Content");
    mainContent.innerHTML += mainContentStr.join(' ') + '&lt;br /&gt;&lt;br /&gt;&lt;h1&gt;Now drag to see how difficult it is, remove content to see how easy it is&lt;/h1&gt;';
  }
  
  function removeContent() {
    mainContent.innerHTML = '';
  }
  
  document.querySelector("#add-content")
    .addEventListener('click', () =&gt; addContent())
  
  document.querySelector("#remove-content")
    .addEventListener('click', () =&gt; removeContent())</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    position: relative;
    height: auto;
    min-height: 100vh;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    overflow: hidden;
    margin: 0;
  }
  
  #wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  #container {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #sidebar {
    height: 100%;
    position: relative;
    margin 0;
    padding: 0;
    box-sizing: border-box;
    background: lightgray;
    border: 2px solid darkgray;
    
    min-width: 0;
  }
  
  #resizer {
    flex-basis: 18px;
  
    position: relative;
    z-index: 2;
    cursor: col-resize;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(0, 0, 0, 0.4);
    background: #333642;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #main {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
  
    background: lightblue;
    height: 100%;
    flex-direction: row;
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  #add-content {
    width: 80px;
    float: right;
    background-color: forestgreen;
  }
  
  #remove-content {
    width: 80px;
    float: right;
    background-color: salmon;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div id="container"&gt;
      &lt;div id="sidebar"&gt;
        &lt;p&gt;Sidebar content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="resizer"&gt;&lt;/div&gt;
      &lt;div id="main"&gt;
        &lt;button id="add-content"&gt;Add Content&lt;/button&gt;
        &lt;button id="remove-content"&gt;Remove Content&lt;/button&gt;
        &lt;p id="main-content"&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>