Ignore overflow of parent element

Question

I have a the following dropdown html structure and css, it's parent has an overflow hidden -

The problem I am having is that when you select the dropdown, it is cut off by the overflow hidden, I need it to ignore the overflow.

I have looked at changing the dropdowns position to fixed, but then I would need to calculate its position for each dropdown, any other suggestions would help!

.overflow-container {
  display: block;
  height: 60px !important;
  overflow: auto;
  overflow-x: hidden;
  float: left;
  background-color: #eaeaea;
  padding: 20px;
}

.dropdown-container:hover .dropdown1 {
  display: block;
}

.dropdown1 {
  display: none;
}

<div class="overflow-container">
  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

</div>

See working JSFiddle - https://jsfiddle.net/DarianSteyn/oq1w6eds/7/

The structure is built using a plugin which sets the html and css. I am able to change the css but not the html structure. I also cant change the height of the parent, it needs to be scrollable if there are multiple dropdowns.

do you want to increase the height of the outer div, on opening dropdown items? — Ankush Sharma, Oct 30 '18 at 09:29
Unfortunately I cant increase the height, that would be an obvious fix yes. — Darian, Oct 30 '18 at 09:30
i think overflow is correct, remove height from the css for overflow-container, it will work — Ankush Sharma, Oct 30 '18 at 09:31
Thanks for the comments, it needs to have a fixed height to fit in a certain amount of space. It needs overflow auto to be scrollable if there are multiple dropdowns — Darian, Oct 30 '18 at 09:33
If it would help you then this plugin can solve your problem. https://select2.org/ — Hemant Kumar, Oct 30 '18 at 09:33

score 4 · Accepted Answer · answered Oct 30 '18 at 09:33

Use position:absolute and use margin or translate to adjust the position. Then don't add position:relative to the parent element so it get ignored by the overflow.

.overflow-container {
  display: block;
  height: 60px !important;
  overflow: auto;
  overflow-x: hidden;
  float: left;
  background-color: #eaeaea;
  padding: 20px;
}

.dropdown-container:hover .dropdown1 {
  display: block;
}

.dropdown1 {
  display: none;
  position:absolute;
  margin-left:100px;
  margin-top:-10px;
}

<div class="overflow-container">
  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

</div>

Ignore overflow of parent element

1 Answers1

Linked