CSS: позиция: абсолютная внутренняя позиция: относительная не позиционируется правильно в overflow-x: visible

Question

У меня есть несколько раскрывающихся элементов в элементе overflow-x:visible, этот элемент находится в элементе position:relative, поэтому элемент с position:absolute может переполняться из прокручиваемого элемента. Проблема в том, что элемент с position:absolute должен находиться в другом position:relative элементе, и он не работает при горизонтальной прокрутке.

При прокрутке параметры раскрывающегося списка элемента не прокручиваются должным образом.

Есть ли способ прокрутки параметров раскрывающегося списка, а также меток раскрывающегося списка?

Источник:

$('div.dropdown__select').click(function() {
  const optionsElement = $(this).next();

  $('div.dropdown__options').each(function() {
    if (this === optionsElement[0]) {
      return;
    }
    $(this).addClass('hidden');
  });

  $(this).next().toggleClass('hidden');
});

div.wrapper {
  position: relative;
  width: 480px;
}

div.scrollable {
  overflow-x: visible;
  overflow-y: hidden;
  white-space: nowrap;
  display: flex;
}

div.dropdown {
  padding: 8px;
}

div.dropdown__select {
  background-color: rgba(0, 0, 255, 0.2);
}

div.dropdown__options {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.2);
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="scrollable">
    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>

    <div class="dropdown">
      <div class="dropdown__select">Label</div>
      <div class="dropdown__options hidden">
        <ul>
          <li>Dropdown option #1</li>
          <li>Dropdown option #2</li>
          <li>Dropdown option #3</li>
          <li>Dropdown option #4</li>
          <li>Dropdown option #5</li>
        </ul>
      </div>
    </div>
  </div>
</div>