我想要一個調整兩個div大小的垂直拉桿。我已經創造了一個同樣的例子，但我正面臨一個問題。 Actual:當我調整上方div的大小時，向下移動滑塊，父div的區域增加，因此給出一個滾動條。 預期:調整大小時，如果向下移動滑塊，它應該只顯示上部div中包含的數據，而當向上移動滑塊時，它應該顯示下部div的內容，并且不應該增加父div的總長度。

var handler = document.querySelector('.handler');
var wrapper = handler.closest('.wrapper');
var boxA = wrapper.querySelector('.box1');
var boxB = wrapper.querySelector('.box2');
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 containerOffsetTop= wrapper.offsetTop;
  var containerOffsetBottom= wrapper.offsetBottom;


  // Get x-coordinate of pointer relative to container
  var pointerRelativeXpos = e.clientY - containerOffsetTop;
  var pointerRelativeXpos2 = e.clientY - e.offsetTop + e.offsetHeight;
  
 
  var boxAminWidth = 30;

  
  boxA.style.height = (Math.max(boxAminWidth, pointerRelativeXpos - 2)) + 'px';
  boxA.style.flexGrow = 0;
   boxB.style.height = (Math.max(boxAminWidth, pointerRelativeXpos2 - 8)) + 'px';
  boxB.style.flexGrow = 0;
});
document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});

body {
  margin: 40px;
}

.wrapper {
  background-color: #fff;
  color: #444;
  /* Use flexbox */
  
}

.box1, .box2 {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  margin-top:2%;
  
  /* 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 */
 
}

.handler {
  width: 20px;
  height:7px;
  padding: 0;
  cursor: ns-resize;
}

.handler::before {
  content: '';
  display: block;
  width: 100px;
  height: 100%;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="box1">A</div>
  <div class="handler"></div>
  <div class="box2">B</div>
</div>

###看起來你的方向是正確的。您只需要使包裝器成為帶有flex direction列的flexbox，并為它指定一個高度。此外，盒子2需要有一個flex 1，以便它可以根據需要增長和收縮。最后，我需要刪除JavaScript中將flex grow設置為0的代碼。這是結果。

var handler = document.querySelector('.handler');
    var wrapper = handler.closest('.wrapper');
    var boxA = wrapper.querySelector('.box1');
    var boxB = wrapper.querySelector('.box2');
    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;
        }

        e.preventDefault();

        // Get offset
        var containerOffsetTop= wrapper.offsetTop;
        var containerOffsetBottom= wrapper.offsetBottom;


        // Get x-coordinate of pointer relative to container
        var pointerRelativeXpos = e.clientY - containerOffsetTop;
        var pointerRelativeXpos2 = e.clientY - e.offsetTop + e.offsetHeight;


        var boxAminWidth = 30;


        boxA.style.height = (Math.max(boxAminWidth, pointerRelativeXpos - 2)) + 'px';
        boxB.style.height = (Math.max(boxAminWidth, pointerRelativeXpos2 - 8)) + 'px';
    });
    document.addEventListener('mouseup', function(e) {
        // Turn off dragging flag when user mouse is up
        isHandlerDragging = false;
    });

body {
            margin: 40px;
        }

        .wrapper {
            background-color: #fff;
            color: #444;
            /* Use flexbox */
            display: flex;
            flex-direction: column;
            height: 200px;
        }

        .box1, .box2 {
            background-color: #444;
            color: #fff;
            border-radius: 5px;
            padding: 20px;
            font-size: 150%;
            margin-top:2%;

            /* 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 */

        }


        .box2 {
            flex: 1;
        }

        .handler {
            width: 20px;
            height:7px;
            padding: 0;
            cursor: ns-resize;
        }

        .handler::before {
            content: '';
            display: block;
            width: 100px;
            height: 100%;
            background: red;
            margin: 0 auto;
        }

<div class="wrapper">
    <div class="box1">A</div>
    <div class="handler"></div>
    <div class="box2">B</div>
</div>