Allow a drop-down element to overflow a container that has hidden or scrolled overflow

javascript html css overflow

11,717

It can be done, but requires three levels of control:

The outer container exists to establish the relative positioning.
Its content container controls the size and overflow.
The drop-down container reacts to the cursor.

For this:

Try this:

<!DOCTYPE html>
<html>
<head>
    <title>Popout Test</title>
    <meta charset="UTF-8" />
    <style>
        .container {
            position: relative;
        }       
        .content {
            width: 10em;
            max-height: 5em;
            overflow: scroll;
        }       
        .dropdown {
            position: absolute;
            background-color: #CCC;
            overflow: visible;
            display: none;
        }       
        :hover>.dropdown {
            display: block;
        }       
    </style>
</head>

<body>
<h1>Popout Test</h1>
<div class="container">
    <ol class="content">
        <li>Alpha</li>
        <li>Bravo</li>
        <li>Charlie &gt;
            <ul class="dropdown">
                <li>One</li>    
                <li>Two</li>    
                <li>Three</li>  
                <li>Four</li>   
                <li>Five</li>   
                <li>Six</li>    
            </ul>       
        </li>   
        <li>Delta</li>
        <li>Echo</li>
        <li>Foxtrot</li>
        <li>Golf</li>
    </ol>
</div>
</body>
</html>

11,717

Author by

matcygan

Updated on June 05, 2022

Comments

matcygan about 2 years

I have horizontally scrollable container and opened dropdown inside (position: absolute). I want the opened dropdown to overflow vertically this container. overflow-y: visible doesn't work and container is scrollable vertically anyway.

Here is simplified example: http://jsfiddle.net/matcygan/4rbvewn8/7/

HTML

<div class="container">
    <div>
        <div class="dd-toggle">Dropdown toggle
            <div class="dd-list">Opened drop down list</div>
        </div>
    </div>
</div>

CSS

.container {
    width: 200px;
    overflow-x: scroll;
    overflow-y: visible;
}
.container >div {
    width: 300px;
}
.dd-toggle {
    position: relative;
    background: grey;
    line-height: 40px;
}
.dd-list {
    position: absolute;
    top: 90%;
    background: #ff9c00;
    width: 70px;
}

image explanation what I want to achieve

Adam Reis almost 5 years

What if you want the dropdown to be a fluid 100% width of its parent container, say .dropdown-wrapper? I don't see any way of doing that other than making the wrapper position: relative, which results in the original problem again of the dropdown not being visible beyond the container.
Robo Robok over 2 years

This solution sucks. It makes the dropdown options element positioned correctly only when we don't scroll down. Scroll down a bit and then hover - it's not even clear that these options belong to the "Charlie" element then.
Alon Dor about 2 years

worked like a charm!