position-fixedで左のサイドバーを指定してるのですが、ブラウザ表示を縮小すると右のコンテンツ部分がサイドバーにめり込む

position: fixed;で左のサイドバーを指定してるのですが、ブラウザ表示を縮小すると右のコンテンツ部分がサイドバーにめり込んでしまいます。こちらclearfixで解消可能ですか？
試したのですが、効いてないないみたいで。レクチャーいただければ幸いです。
以前display: flex;での実装を頂いたのですが、サイドバーが追従しないとダメとのことで没になりました
flex版
https://codepen.io/boo-jp/pen/PoKLyYL

・実装途中codepen
https://codepen.io/boo-jp/pen/ExvJOGJ

overflow: hidden;でのめり込み解消はレスポンシブ対応してないので(仕様要件)ブレイクポイントで中途半端に入れるとデバイスで閲覧した時にスクロールバーがでないので全て表示できない恐れあるので対象外です

全体コードはcodepenにあります

Lhankor_Mhy

2021/11/24 08:02 編集

ご提示のコードを試してみましたが、「ブラウザ表示を縮小すると右のコンテンツ部分がサイドバーにめり込んでしまいます」という問題が再現しませんでした。ご提示いただいている部分に原因はなさそうです。 https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0c6b576296aa35d2eadcad29bc2c8e5b.png ご提示いただけていない部分に原因があるかもしれません。

recal

2021/12/07 13:23

こちらの環境では、右のコンテンツが、右のヘッダーと重なって表示された上に横幅が狭くなると画面外のタブが押せない、状態でした。説明にある「ブラウザ表示を縮小すると右のコンテンツ部分がサイドバーにめり込んでしまいます。」はそのことでしょうか? ちなみにclearfixはfloatを解除した際に高さを確保する技術の俗称ですので、positionとは関係ないですね。