How to display div with position absolute outside of container scrolled?

Question

I'm trying to create a dropdown search. But I found a problem when using a container with a scroll.

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); }

 .container { width: 500px; height: 300px; border: solid gray 1px; padding: 10px; display: flex; overflow: auto; transform: none; position: relative; background: #337ab7 !important; transition: background-color .3s; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; height: 60px; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; top: 60px; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 2px solid red; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;}

 <div class="container"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.."> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> <a href="#custom">Custom</a> <a href="#support">Support</a> <a href="#tools">Tools</a> </div> </div>

As can see the list of dropdown was cut.

How to resolve this?

Answer 1

You have overflow: auto on two elements, so the outer one scrolls first. You just have to be sure that the menu box doesn't render taller than the space available. You can also remove the outer scroll if it's not needed for other purposes.

.container {
    /* overflow: auto; */
}

.dropdown-content {
    max-height: 245px;
}

Fiddle demo

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); }

 .container { width: 500px; height: 300px; border: solid gray 1px; padding: 10px; display: flex; /* overflow: auto; */ transform: none; position: relative; background: #337ab7 !important; transition: background-color .3s; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; height: 60px; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; top: 60px; background-color: #f6f6f6; min-width: 230px; max-height: 245px; overflow: auto; border: 2px solid red; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; }

 <div class="container"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.."> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> <a href="#custom">Custom</a> <a href="#support">Support</a> <a href="#tools">Tools</a> </div> </div>

If you'd rather not implement fixed heights, consider using a flexbox layout instead.

Answer 2

Here is a solution if you wish to maintain the scroll of the .container and still show the dropdown menu entirely.

What I imagine is to put the menu out of the .container and everything inside a wrapper . The good thing is that JavaScript is being used, so it helps.

HTML would be like this:

<div class="wrapper">
  <div class="container">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  </div>
  <div id="myDropdown" class="dropdown-content">
      <input type="text" placeholder="Search..">
      <a href="#about">About</a>
      <a href="#base">Base</a>
      <a href="#blog">Blog</a>
      <a href="#contact">Contact</a>
      <a href="#custom">Custom</a>
      <a href="#support">Support</a>
      <a href="#tools">Tools</a>
    </div>
</div>

Than, you change the position of .dropdown-content :

.dropdown-content {
  left: 19px; // also top, right and bottom if you need
}

Hope it can be useful too.