Как сделать переполнение контейнера только по оси x, когда он содержит абсолютно позиционированный контент?

Question

У меня есть настраиваемый выпадающий список, который использует абсолютное позиционирование для списка элементов. Это находится в строке таблицы. Когда область просмотра недостаточно широка, чтобы содержать таблицу, я хочу, чтобы она автоматически прокручивалась по оси X.

Проблема, с которой я столкнулся, заключается в том, что согласно спецификации c, если я добавлю overflow-x: auto; к родительский контейнер и попробуйте установить overflow-y: visible;, он устанавливает эту ось на авто. Это вызывает прокрутку оси Y.

Пример: https://codepen.io/afisher88/pen/mdJybaY

HTML

<div class="outer-wrapper">
  <div class="inner-wrapper">
    <table>
      <thead>
        <tr>
          <th>One</th>
          <th>Two</th>
          <th>Three</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>One</td>
          <td>
            <div class="custom-dropdown">
              <button id="btn" type="button">Toggle dropdown!</button>
              <ul>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
              </ul>        
            </div>
          </td>
          <td><input type="text"/></td>              
          <td>WFaouhfgeaouhgaeoghuaegoauehgaoeguhaegouhaegoaehugaeoguhaeg</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

S CSS

.outer-wrapper {
  background: #f2f2f2;
  width: 500px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: visible;

}

.custom-dropdown {
  position: relative;
  width: 200px;
  background: #fff;

    &.open {
    ul {
      display: block;
    }
  }

  button {
    display: block;
    border: 0;
    box-shadow: 0;
    background: #fff;
    padding: 5px;
    height: 30px;
  }

  ul {
    position: absolute;
    display: none;
    top: 14px;
    left: 0;
    width: 100%;
    background: #fff;
  }
}

Answer 1

Редактировать : Чтобы ответить на комментарий о заполнении и прерывистом позиционировании, так как вы используете Sass, установите переменную для заполнения контейнера (по крайней мере, там, где используется нижнее заполнение) и используйте это в следующем transform.

• Удалить position: relative; из .custom-dropdown
• Удалить left: 0 из .custom-dropdown
• Удалить top: 14px; из .custom-dropdown ul
• Добавить transform: translateY(-$padding), где $padding - переменная Sass для заполнения контейнера (если имеется).
• Refactor width: 100%; to width: 10em; (для соответствия ширине ячейки) в .custom-dropdown ul (личное предпочтение)

Я также добавил светлую рамку вокруг ul для некоторых добавленных UX.

const btn = document.getElementById('btn');

console.log(btn);
  
btn.addEventListener('click', (e) => {
  e.target.parentElement.classList.toggle('open');
});

.outer-wrapper {
  background: #f2f2f2;
  width: 500px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: visible;
  padding: 1em; /* Sass variable simulation */
}

.custom-dropdown {
  /*position: relative;*/
  width: 200px;
  background: #fff;
}

.custom-dropdown.open ul {
  display: block;
  z-index: 10;
}
  
.custom-dropdown button {
  display: block;
  border: 0;
  box-shadow: 0;
  background: #fff;
  padding: 5px;
  height: 30px;
}
  
.custom-dropdown ul {
  position: absolute;
  display: none;
  /* left: 0; */
  width: 10em;
  background: #fff;
  border: 1px solid lightgrey;
  transform: translateY(-1em); /* Sass variable simulation */
}

<div class="outer-wrapper">
  <div class="inner-wrapper">
    <table>
      <thead>
        <tr>
          <th>One</th>
          <th>Two</th>
          <th>Three</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>One</td>
          <td>
            <div class="custom-dropdown">
              <button id="btn" type="button">Toggle dropdown!</button>
              <ul>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
                <li>Option</li>
              </ul>        
            </div>
          </td>
          <td><input type="text"/></td>              
          <td>WFaouhfgeaouhgaeoghuaegoauehgaoeguhaegouhaegoaehugaeoguhaeg</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>