Проблема переполнения с пустым div внутри другого div ⇐ CSS

[Anonymous]

Я хочу сделать слайдер между двумя сторонами моего веб-сайта, чтобы пользователи могли регулировать размеры двух сторон. Я хочу, чтобы ползунок был похож на узкую линию с «пузырем» в центре, чтобы его можно было легко перетаскивать, но пузырь не выходил за пределы линии, потому что он находится внутри div
мой код выглядит так:

Код: Выделить всё

main {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}

main #separator {
height: 100%;
width: 3px;
background-color: grey;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
cursor: e-resize;
overflow: visible;
}

#separator #separator-bubble {
width: 40px;
height: 10px;
border-radius: 5px;
background-color: grey;
z-index: 1000;
}

Код: Выделить всё

Я попробовал переполнение: видимый; и все такое, но ничего не помогло

Подробнее здесь: https://stackoverflow.com/questions/785 ... nother-div