Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Overflow

Allow A Drop-down Element To Overflow A Container That Has Hidden Or Scrolled Overflow

Post a Comment
I have horizontally scrollable container and opened dropdown inside (position: absolute). I want the opened dropdown to overflow vertically this container. overflow-y: visible does

Solution 1:

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:

screenshot

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>

Solution 2:

Add position: static to the parent element.


Post a Comment for "Allow A Drop-down Element To Overflow A Container That Has Hidden Or Scrolled Overflow"