[JavaScript]Select2でドロップダウンの表示位置がずれる

Question

https://select2.org/を利用してselect要素をカスタマイズしています。

デモなどを見ると、セレクト要素の下に検索ボックス、リスト一覧が表示されるようになっているのですが、
上記の添付画像のようにセレクト要素部分が隠れてしまいます。
本来は下記のようにセレクトボックス部分が表示されると思うのですが。
（下記の画像はcssで無理やり表示させています。）

Select2のバージョンは4を利用しています。
jQueryは3.4.1です。
WordPressで実行しています。

指定のスタイルシート、JavaScriptだけにしてもダメでした。

最終手段で無理やりJavaScriptでセレクト要素の高さ分だけ高さを追加しようかと考えているのですが、
デモなどでは通常通り動いているので、わざわざコードを追加するのもなと思っております。

<select id="list" name="list" class="js-select2" data-placeholder="リストを選択">
    <option></option>
    <option value="リスト1">リスト</option>
    <option value="リスト2">リスト</option>
    <option value="リスト3">リスト</option>
</select>

$(window).on('load', function() {
　　$('.js-select2').select2();
});

などで読み込み終了後に実行してもダメでした。
何か方法はないでしょうか？

よろしくお願いいたします。

Comments

[x_x]

HTML はどうなっているのでしょうか？

[JoestarJorge]

HTMLを追記しました。
よろしくお願いします。

[x_x]

提示コードのみでは再現しませんでした。
ほかに使っている CSS などはないでしょうか？
画像に映っている外側のものが気になります。

[JoestarJorge]

解決しそうです。flexboxで囲んでるのが関係しているのかもしれません。
ちょっと挑戦中です。

[JoestarJorge]

WordPressのadminbarのbodyにpaddingが設定されているのが原因でした。
ご迷惑をおかけしました。

[JoestarJorge]

bodyのpaddingではなく、htmlのmargin-topでした。

Answer 1

WordPressのadminbarのhtmlにmargin-topが設定されているのが原因でした。
ご迷惑をおかけしました。