【解決方法】 Overflow-y は、ドロップダウンコンテンツを遮断します。オーバーフローで表示するにはどうすればよいですか?

div内にドロップダウンがあります。
div には、スクロールするように設定された overscroll プロパティがあります。
問題は、ドロップダウン要素が切り取られることです。オーバーフローを適用しない場合、ドロップダウン要素は期待どおりに表示されます。

PS divの高さを変更することはできません。高さを変えずにこれを達成しなければなりません。

これが私が望む方法です:
AutoDraw[^]

これは私が得ているものです:

私が試したこと：

<div style="overflow-y: scroll; height: 427px">
// dropdown inside 
</div>

解決策 1

それまでポップオーバー API[^] すべての主要なブラウザーで採用されていますが、これはまだかなり先のことです。要素は、最も近い先祖の境界を逃れることはできません。ブロック整形コンテキスト[^].

カスタムの「ドロップダウン」要素を要素の外側に表示する場合は、 overflow-y:scroll マークアップまたは Javascript を使用して、ドロップダウン要素をオーバーフロー要素の外に移動する必要があります。

(あなたはポップオーバーポリフィル[^] 図書館; ただし、特定のケースに合わせて特定のスクリプトを作成する方が、ほぼ確実に簡単です。)