看起来你在正确的轨道上。您只需要将 Package 器设置为具有flex方向列的flexbox，并为其分配高度。此外，框2需要具有1的flex，以便它可以根据需要增长和收缩。最后，我需要删除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>