title: Resizing multiple divs with mouse clicks
body: <p>I took a look at this article and I wanted to try this same technique with more divs. </p>
  
  <p>The above code works with 2 divs but not 4 divs. I tried to figure out why so I decided to try the following code. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var handler = document.querySelector('.handler');
  var wrapperWidth;
  var wrapper = handler.closest('.wrapper');
  var box = wrapper.querySelector('.box');
  var isHandlerDragging = false;
  
  document.addEventListener('mousedown', function(e) {
    // If mousedown event is fired from .handler, toggle flag to true
    if (e.target === handler) {
      isHandlerDragging = true;
    }
  });
  
  document.addEventListener('mousemove', function(e) {
    // Don't do anything if dragging flag is false
    if (!isHandlerDragging) {
      return false;
    }
  
    // Get offset
    var containerOffsetLeft = wrapper.offsetLeft;
  
    // Get x-coordinate of pointer relative to container
    var pointerRelativeXpos = e.clientX - containerOffsetLeft;
    
    // Arbitrary minimum width set on box A, otherwise its inner content will collapse to width of 0
    var boxAminWidth = 60;
  
    // Resize box A
    // * 8px is the left/right spacing between .handler and its inner pseudo-element
    // * Set flex-grow to 0 to prevent it from growing
    
    wrapperWidth = wrapper.stlye.width;
    
    box.style.width = (Math.max(boxAminWidth, wrapperWidth - 8)) + 'px';
    box.style.flexGrow = 0;
  });
  
  document.addEventListener('mouseup', function(e) {
    // Turn off dragging flag when user mouse is up
    isHandlerDragging = false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    background-color: #fff;
    color: #444;
    /* Use flexbox */
    display: flex;
  }
  
  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
    
    /* Use box-sizing so that element's outerwidth will match width property */
    box-sizing: border-box;
    
    /* Allow box to grow and shrink, and ensure they are all equally sized */
    flex: 1 1 1 1 auto;
  }
  
  .handler {
    width: 20px;
    padding: 0;
    cursor: ew-resize;
    flex: 0 0 auto;
  }
  
  .handler::before {
    content: '';
    display: block;
    width: 4px;
    height: 100%;
    background: red;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="box"&gt;A&lt;/div&gt;
    &lt;div class="handler"&gt;&lt;/div&gt;
    &lt;div class="box"&gt;B&lt;/div&gt;
     &lt;div class="handler"&gt;&lt;/div&gt;
    &lt;div class="box"&gt;C&lt;/div&gt;
     &lt;div class="handler"&gt;&lt;/div&gt;
    &lt;div class="box"&gt;D&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I wanted to have happen was the divs to be arrangeable.</p>
  
  <p>You can take a look at the code here. </p>
  
  <p><a href="https://jsfiddle.net/paralaxwombat/1Lfqdb6x/" rel="nofollow noreferrer">https://jsfiddle.net/paralaxwombat/1Lfqdb6x/</a></p>