Как позволить абсолютному элементу переполнить внешний прокрученный контейнер? ⇐ CSS

[Anonymous]

Я работаю с макетом, где родительский контейнер имеет переполнение: Auto, что заставляет его обрезать любые внутренние элементы, которые переполняют, ожидаемое поведение. В то же время я хочу, чтобы раскрывался, оставался привязанным к своему родительскому элементу, когда он прокручивает. Прокрутите контейнер < /p>
< /li>
< /ol>
Вот минимальное воспроизведение проблемы. Here, the blue .dropdown div is clipped by the .fixedScrollable container:
https://jsfiddle.net/htL51dmo/49/

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

.fixedScrollable {
height: 300px;
width: 200px;
padding: 10px;
background-color: lightblue;
overflow: auto;
}

.container1 {
background-color: lightslategrey;
height: 500px;
padding: 10px;
padding-top: 100px;
}

.container2 {
position: relative;
background-color: pink;
height: 50px;
}

.dropdown {
position: absolute;
background-color: blue;
height: min-content;
width: 100px;
left: 80%;
top: 100%;
}< /code>




Dropdown menu

Подробнее здесь: https://stackoverflow.com/questions/796 ... -container