Как заставить скрытый дочерний элемент отображаться в родительском элементе overflow: hidden?

Question

Я работаю на <div> столе. Он имеет переполнение-x, т.е. прокручивается горизонтально, если он становится большим, чтобы поместиться в окне просмотра. Все отлично работает, кроме одного вопроса. У меня есть скрытый раскрывающийся список, который должен отображаться при нажатии на его родительский элемент (здесь в данном случае это «Продукт» в заголовке таблицы).

Но из-за overflow:hidden;, примененного к .customer_column, выпадающий список .customer_heading_dropdown не виден Когда я удаляю переполнение скрытого, отображается раскрывающийся список. Поскольку моя таблица div прокручивается и ее содержимое уменьшается, если текст внутри слишком длинный. Таким образом, я не могу сбросить переполнение скрытым.

Так есть ли обходной путь, с помощью которого я могу показать раскрывающийся список, сохраняя при этом переполнение скрытым?

.customers_table_cont {
  border:1px solid red;
  width:1200px;
}

.customers_table {
  overflow-x:auto;
  overflow-y:hidden;
}

.customer_headings {
  background-color:#4c4c4c;
  color:#ffffff;
  white-space:nowrap;
  display:inline-block;
}

.customer_row {
  white-space:nowrap;
  display:inline-block;
}

.customer_column {
  width:250px;
  display:inline-block;
  padding:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:inline-block;
  position:relative;
}

.customer_heading_dropdown {
  list-style-type:none;
  background:#ffffff;
  border-radius:0px 0px 5px 5px;
  box-shadow:0px 0px 10px #5a5a5a;
  display:block;
  padding:10px 5px;
  position:absolute;
  top:34px;
  left:18px;
  z-index:99999;
}

.customer_heading_dropdown li {
  border-radius:5px;
  color:#525252;
  cursor:pointer;
  font-weight:normal;
  line-height:14px;
  margin:5px;
  padding:5px 10px 5px 25px;
}

<div class="customers_table_cont">
  <div class="customers_table">
    <div class="customer_headings">
      <div class="customer_column">Company</div>
      <div class="customer_column">Name Heading is too long to fit here and shrinks</div>
      <div class="customer_column">Product
      <ul class="customer_heading_dropdown">
      <li>Remove Column</li>
      <li>Move Column Left</li>
      <li>Move Column Right</li>
      <li>Widen Column</li>
      <li>Narrow Column</li>
      </ul>
      </div>
      <div class="customer_column">Site</div>
      <div class="customer_column">Date Added</div>
      <div class="customer_column">Salesperson</div>
      <div class="customer_column">Quote</div>
      <div class="customer_column">Country</div>
      <div class="customer_column">Progress</div>
      <div class="customer_column">Estimate</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma is doing a great job here</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
  </div>
</div>

Чтобы сохранить мой код простым, я не даю здесь никаких JS. Вы можете поиграть с раскрывающимся списком, изменив display:block;. Это то, что делает мой JS.