Lista rozwijana oparta o DIV-y ignorująca overflow rodziców

Cześć wszystkim,

W projekcie utworzyłem sobie "kontrolki", które z uwagi na złożoność informacji maja mi zastąpić standardowe elementy HTML jak SELECT-OPTION, INPUT-CHECKBOX itp.
Nowe kontrolki oparte są o DIV-y odpowiednio zagnieżdżone w sobie i wystylizowane w CSS.

Zestaw kontrolek jako filtrowanie umieszczony jest w nadrzędnym DIV-ie służącym za nagłówek.

<!-- jakas tam treść -->
<div class='subpage'>
   <div class='filters'>
      <nobr>
         <div class='element'>
            <div class='visible'>
               <div class='header'>Klienci</div>
               <div class='placeholder'>wybrany klient</div>
            </div>
            <div class='options'>lista klientów</div>
         </div>
         <!-- divy inline-block -->
      </nobr>
   </div>
   <div class='content'>
      <!-- tutaj treść podstrony/wyniki wyszukiwania etc -->
   </div>
</div>
<!-- jakas tam treść -->

   .subpage {display:block;position:fixed;overflow:hidden;/*top,left,right,bottom etc bla bla*/}
   .filters {display:block;position:absolute;left:0px;top:0px;right:0px;height:50px;/* overflow-x:auto; */}
   .content {display:block;position:absolute;left:0px;top:50px;right:0px;bottom:0px;overflow:auto;}

   .element {display:inline-block;width:200px;height:50px;position:relative;}
   .element > div.visible {display:flex;flex-direction:column;}
   .element > div.visible > .header {display:block;height:20px;width:100%;/* ... */} 
   .element > div.visible > .placeholder {display:block;height:30px;width:100%;/* ... */}
   .element > div.options {display:none;height:auto;min-height:50px;max-height:50vh;overflow:auto;position:absolute;top:50px;left:0px;right:0px;}
   .element:hover > div.options {display:block;}

Filtrów może być dużo (w zależności od podstrony) więc .filters powinno być scrollowane horyzontalnie.
Część filtrów posiada ukryte elementy (listy divów, opisy, zestawy checkboxów etc), które się pojawiają poniżej po najechaniu kursorem (:hover).
W przypadku, gdy div.filters nie posiada określonych parametrów overflow w CSS, to wszystko jest ok poza brakiem możliwości przewijania horyzontalnie.
Gdy ustawię overflow-x lub overflow na scroll/auto/hidden czy cokolwiek to div.options, który pojawia się po :hover, obcinany jest tam gdzie są krawędzie div.filters niezależnie od ustawienia z-index dla DIV.element.

Pytanie: Czy jest opcja, aby DIV.options renderował się na wierzchu przy zachowaniu overflow:scroll-x na elemencie DIV.filters ? DIV.options spokojnie może nachodzić na treść w elemencie DIV.content.