Dropdown inside overflow hidden container-CodePudding

If a dropdown is inside a scrollable container. How to avoid the dropdown being clipped by the overflow property?

Have found a lot of solutions, but none with a working example

It's possible to do with javascript, but the internet claims it's possible with pure CSS.. But can't make it work

The dropdown has to follow when you scroll the grey container with overflow

<div >
  <div>
    test<br>test
  </div>
  <div >
    <div >dropdown content</div>
  </div>
  <div>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
  </div>
</div>

.main{
  background:grey;
  width:200px;
  height:100px;
  padding:5px;
  margin:20px;
  overflow:auto;
}

.dropdown-container{
  position:relative;
}

.dropdown{
  position:absolute;
  margin:0 10px;
  background:blue;
  width:100px;
  height:200px;
  color:white;
}

CodePudding user response：

Yes you can make it work with css only, you have to use the parent div (dropdown-container) as absolute position like:

.main{
  position:static;
  background:grey;
  width:200px;
  height:100px;
  padding:5px;
  margin:20px;
  overflow:auto;
}

.dropdown-container {
  position:absolute;
  margin:0 10px;
  background:red;
  width:100px;
  height:200px;
  color:white;
  z-index: 2000;
}

<div >
  <div>
    test<br>test
  </div>
  <div >
    <div >dropdown content</div>
  </div>
  <div>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
  </div>
</div>

CodePudding user response：

I'm not sure if this is what you want but if you change the position:absolute to position:relative for the .dropdown class, you will not have this problem of dropdown clipped and you will be able to scroll inside the scrollable container.

.dropdown{
  position:relative;
  margin:0 10px;
  background:blue;
  width:100px;
  height:200px;
  color:white;
}

CodePudding user response：

If you want your dropdown-container to follow the grey container when you scroll, this can be your solution (if not, please do comment and I can try a different method).

.main {
  background: grey;
  width: 200px;
  height: 100px;
  padding: 5px;
  margin: 20px;
  overflow: auto;
}

.dropdown-container {
  position: sticky;
  top: 5px;
}

.dropdown {
  position: absolute;
  margin: 0 10px;
  background: blue;
  width: 100px;
  height: 200px;
  color: white;
}

<div >
  <div>test<br />test</div>
  <div >
    <div >dropdown content</div>
  </div>
  <div>
    test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
  </div>
</div>

But as the dropdown will likely appear as a result of a click event(it won't be visible all the time) so the below solution seems more practical where you'll also be able to fully view you dropdown container.

.main {
  background: grey;
  width: 200px;
  height: 100px;
  padding: 5px;
  margin: 20px;
  overflow: auto;
}

.dropdown-container {
  position: sticky;
  top: 5px;
}

.dropdown {
  /* position: absolute; */
  margin: 0 10px;
  background: blue;
  width: 100px;
  height: 200px;
  color: white;
}

<div >
  <div>test<br />test</div>
  <div >
    <div >dropdown content</div>
  </div>
  <div>
    test<br />test<br />test<br />test<br />test<br />test<br />test<br />test
  </div>
</div>