position: absolute で指定した要素が親要素の領域をoverflowした時の対処

Question

前提

このようなメニューを作っています。

[メイン画面]
左側：サイドバー（メニュー）
右側：メイン (灰色）

[メニュー]
メニューにカーソルをあわせると、
サブメニューが表示される
（上の画像では、Settingsにカーソルを合わせると、サブメニューが右に表示されます。）

発生している問題

サブメニューの数が多い場合、 メインの領域
をoverflowします。
この時、うまくoverflowを調整できず、画面下に真っ白な領域ができてしまいます。

メインの領域もうまくoverflowして、
サブメニュー、メイン画面が下にoverflowして、
白い画面がなくなるように調整したいです。

試していること

positionを以下のように設定しています。

1. メイン画面(Container) 
position: relative

2. サイドメニュー
position: fixed

3. 各メニューのdiv
position: relative

4. サブメニュー
position: absolute

このように設定したのですが、
問題としている、overflow部の白い部分が表示されてしまいました。

###　質問

このようなケースはうまく解決できますでしょうか？
考えても解決策が思い浮かばなかったため質問をさせていただきます。
不可能であれば、デザインごと変えることを検討したいと思っております。

どなたかわかるかたアドバイスいただけますと幸いです。
よろしくお願いいたします。

Answer 1

HTMLコードとCSSコードがd提示されていないので、推測ですが、

サブメニューを position: fixed; bottom: 0; とするとかでどうでしょう。

Comments

[gano]

ご回答ありがとうございます。
サブメニューを position: fixed; にすると、
overflowした部分が表示できなくなってしまいました。

bottom:0　をつけるとすべてのサブメニューが最下部にいってしまいます。
(React でコンポーネントにしているため、他の要素も同時に編集されます。）

scroll しようと overflow: scrollを付与しても、
表示できない状態です。。

[hatena19]

とりあえず現状のHTMLとCSSを質問に追記してください。
話はそれからです。

あと、メニュー数は動的に変化するということでしょうか。

Answer 2

親要素をoverflow:hiddenすればよいのでは

Comments

[gano]

ご回答ありがとうございます。
説明不足がありました。申し訳ありません。
メインの画面は、縦方向に100%を超えることがあるので、overflow-y: scrollを付けております。