html - 如何以非交互方式连续调整 2 个 Div

Question

我尝试并排显示 2 个图像 - 50/50，这样我就可以使用鼠标移动分隔线来拉伸一个图像并缩小另一个图像。

这是我尝试实现此目标的代码，但它没有按预期工作。（这是 Dash 的一部分）

app.layout = html.Div(id = 'mainTestDiv',
    children = [html.Div(id = 'win1',
        children = [html.Img(src = "http://dummyimage.com/1280x500/00f/fff", id = 'pic1',
            className = 'img100')],
        className = 'mtest'),

    html.Div(id = 'win2',
        children = html.Img(id = 'pic2', src = "http://dummyimage.com/1280x500/f0f/fff",
            className = 'img100'),
        className = 'mtest2')
    ],
    className = 'my_test_container'
)
                        

这是与之配套的css。

.my_test_container {
    display: flex;
    width: 100%;
    height: 300px;
    border: 3px red;
    /* not sure why but I don't get black background either*/
    background-color: #111111;
}

.mtest {
    resize: horizontal;
    width: 50vw;
    overflow: auto;
}

.mtest2 {
    width: 100%;
    overflow: visible;
}

.img100 {
    width: 100%;
    height: 300px;
    overflow: auto;
}

如果我隐藏右 Div(id = 'win2')与"display: none;"左图像反应正确（如预期），意味着我可以在屏幕左端平滑地将图像缩小到几乎为零，并在屏幕右端将其拉伸到 100%。添加正确的图像会导致一些奇怪的行为。我该如何解决？

编辑：我希望能够将分隔线平滑地移动到任一端，缩小一个图像并将另一个图像扩展到屏幕宽度的 95-100%。

我得到的是点击移动分隔线后，它立即向左跳约 30%（缩小左图） - 没有鼠标移动。然后我可以按预期缩小左图像（右图像几乎占据整个屏幕宽度）但不能将分隔线移动到屏幕右侧 - 它停在大约 50% 并且不想进一步移动，将两个图像都留在看法。我尝试了不同的设置组合，但似乎没有一个对我有用。

标签： htmlcss