Q&A
ご提示のコードを試してみましたが、「ブラウザ表示を縮小すると右のコンテンツ部分がサイドバーにめり込んでしまいます」という問題が再現しませんでした。
ご提示いただいている部分に原因はなさそうです。
https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0c6b576296aa35d2eadcad29bc2c8e5b.png
ご提示いただけていない部分に原因があるかもしれません。
position: fixed;で左のサイドバーを指定してるのですが、ブラウザ表示を縮小すると右のコンテンツ部分がサイドバーにめり込んでしまいます。こちらclearfixで解消可能ですか？
試したのですが、効いてないないみたいで。レクチャーいただければ幸いです。
以前display: flex;での実装を頂いたのですが、サイドバーが追従しないとダメとのことで没になりました
flex版
https://codepen.io/boo-jp/pen/PoKLyYL
・実装途中codepen
https://codepen.io/boo-jp/pen/ExvJOGJ
overflow: hidden;でのめり込み解消はレスポンシブ対応してないので(仕様要件)ブレイクポイントで中途半端に入れるとデバイスで閲覧した時にスクロールバーがでないので全て表示できない恐れあるので対象外です
全体コードはcodepenにあります
こちらの環境では、右のコンテンツが、右のヘッダーと重なって表示された上に
横幅が狭くなると画面外のタブが押せない、状態でした。
説明にある「ブラウザ表示を縮小すると右のコンテンツ部分がサイドバーにめり込んでしまいます。」はそのことでしょうか?
ちなみにclearfixはfloatを解除した際に高さを確保する技術の俗称ですので、positionとは関係ないですね。
すみません。ありがとうございました
自己解決
