長いURLが親ラップを突き抜けてはみ出す問題はCSS一行で解決できますね。
【CSS】長いURLを折り返す・自動改行させる
リンクのテキストでURLを入れる際、スマホ表示にしたら『URL突き抜けてるやんけ!』ってあるあるだと思います。
私も何回も遭遇しているのにつどググってるので(アホかな?)自分用にメモしておきます。
結論から書くと、
word-break: break-all;
↑でOKです。
これで、ブラウザ幅が狭まっても単語の途中で自動改行してくれます。
URLが自動改行されない理由については下記を参考にさせていただきました↓
ありがとうございます!