'Dropdown inside scrollable container - how to make options pop out?

I'm trying to implement a dropdown inside a scrollable container. The problem I have is that the options, when expanded, are clipped inside this container. I know this is a recognized problem with scrollable containers, but to this day I don't know a good solution for it. Here's the problem:

enter image description here

I need these pink options to pop out of the container. Is this possible without keeping them outside of the container?

Here's the snippet:

document.getElementById('dropdown-button').addEventListener('click', () => {
    document.querySelector('.dropdown-options').classList.toggle('hidden');
});
.scrollable {
    width: 200px;
    height: 400px;
    background: yellow;
    overflow-y: auto;
}

.filler {
    background: orange;
    height: 350px;
}

.dropdown {
    position: relative;
}

.dropdown-options {
    background-color: pink;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
}

.hidden {
    display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Overflow</title>
</head>
<body>
    <div class="scrollable">
        <div class="filler"></div>
        <div class="dropdown">
            <button id="dropdown-button">Expand me</button>
            <ul class="dropdown-options hidden">
                <li>Option one</li>
                <li>Option two</li>
                <li>Option three</li>
            </ul>
        </div>
        <div class="filler"></div>
    </div>
</body>
</html>

Any chance for a CSS-only solution?

csscss-positionoverflow


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions