Users can adjust the width of side-by-side divs by dragging them

Question

I have two divs side by side. If there is any simple solution, allow the user to resize the width of both divs by dragging.

If the width of one div increases, the width of the other div decreases, keeping the sum of the widths of the two divs unchanged.

It would be great if it could be implemented using pure javascript or css. Feel free to add any other items like divs.

The codes for the two divs are as follows:

.left {
    float: left;
    width: 49%;
    min-height: 50px;
    border: 2px dashed #f0f
}

.right {
    float: right;
    width: 49%;
    min-height: 50px;
    border: 2px dashed #00f
}

<div class="right"></div>
<div class="left"></div>

Thanks for any ideas!

Answer 1

Out of curiosity, I created a little experiment and discovered using a main flexbox container .wrapper to contain .left and .right elements and make the hard work of Flexbox Mechanism easier to implement.

Two things:

• When using resize, the property overflow needs to be set to auto to make the handle visible (in Windows Firefox and Chrome/Edge The above test passed).
• Select a child element that is resizable and has a handle, I chose .left. Because they are children of the flexbox, when using flex: 1(.right) on another element, the flexbox mechanism will make that element Follows the size of the resized element and fills any remaining space.

MDN Reference: resize

/* 用于轻松调整 .right 大小的弹性盒容器 */
.wrapper { display: flex }

.left, .right {
    /* 初始大小，浏览器将记住上次状态直到页面重新加载 */
    width: 50%;
    min-height: 50px; /* 至少要有一些内容显示 */
    min-width : 50px;
}

.left {
    overflow: auto; /* 必须使手柄可见 */
    resize: both;   /* 启用双向调整大小 */
           /* 在单个方向上使用 horizontal/vertical */
}

.right {
    flex: 1; /* 将填充剩余的水平/垂直空间 */
}

/* 美化 */
.left  { border: 2px dashed #f0f }
.right { border: 2px dashed #00f }

<div class="wrapper">
    <div class="left" ></div>
    <div class="right"></div>
</div>