How to show a dropdown menu outside a parent element with overflow: auto in CSS?

Question

I have tried a lot of things and searched online but I cannot figure out the solution to this problem.

I have a div container which has a max-height, min-height and also overflow: auto. When the inner content is larger than the max-height, a scrollbar appears as expected. But, inside the content there is a dropdown, which when clicked, the menu expands, and instead of being displayed outside the parent container, it is like changing the inner content height.

The only solution I found online and made sense to me, is to wrap the container to div with relative positioning and make the dropdown absolute, but there is a big drawback now, the dropdown stays fixed on scroll, as it is absolute positioned relative to the wrapper and not the content. Is there any common way to fix this or any other solution ?

I didn't post any code because I do not want the answer to rely on my code. I just want a minimal example if possible with these properties:

1. Container has a max-height
2. If content is larger than the container's max-height then the container should display a scrollbar.
3. The content has a dropdown which should scroll with every other element of the content.
4. The menu options of the dropdown element are escaping the container / are displayed outside the boundaries of the container.

Calamitous

It only works if none of the dropdown's ancestor elements up to the overflowing container is positioned (that is, has a computed value for position other than static). – From

the solution I found with the relative wrapper is not working because as I said, the dropdown stays fixed when scrolling. – Calamitous

Dropdowns are always positioned absolute. Please show a minimal example of the problem in form of a snippet. Long story short, using dropdown elements inside scrollable containers is going to get you into trouble, every single time. – From

try using box-sizing: border-box. Basically what it will do is that the border and padding will get added into the elements height and width. Hope this works. But it would be easier if you could show us the code because without the code we cannot know where you are going wrong. However, I hope I solve your query. – Premise

Answer 1

To illustrate on my comments on the question, here's an MCVE:

.scroll-container {
  border: 3px dashed #eee;
  height: 400px;
  padding: 10px;
  overflow: auto;
  width: 400px;
}

.content {
  background-color: #f0f0f0;
  height: 600px;
  position: relative;
}

.dropdown {
  background-color: orange;
  position: absolute;
  height: 300px;
  width: 300px;
  left: 300px;
}

<div class="scroll-container">
  <div class="content">
    <div class="dropdown"></div>
  </div>
</div>

As you can see, with absolute positioning based on the relative position of div.content the orange div.dropdown creates a horizontal overflow, which is what you don't want. To fix this scenario, you need to remove position: relative from div.content and use transform: translateX(300px); instead of left: 300px;:

.scroll-container {
  border: 3px dashed #eee;
  height: 400px;
  padding: 10px;
  overflow: auto;
  width: 400px;
}

.content {
  background-color: #f0f0f0;
  height: 600px;
}

.dropdown {
  background-color: orange;
  position: absolute;
  height: 300px;
  width: 300px;
  transform: translateX(300px);
}

<div class="scroll-container">
  <div class="content">
    <div class="dropdown"></div>
  </div>
</div>

From

the problem is that I want the orange box to scroll together with the gray box, I need a combination of first and second case, meaning no horizontal overflow as you said, but also scroll vertically together with the gray box – Calamitous