webサービスでレスポンシブ対応をしたいのですができません。 画像のようにはみ出してしまいます。 v

webサービスでレスポンシブ対応をしたいのですができません。
画像のようにはみ出してしまいます。
viewportは指定してbox-sizeingをborder-boxにしたりwidthを100%にしましたがはみ出たままです。　なぜでしょうか？

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/01/08 10:26

回答がつかないようなので…

（どうせ回答しても反応はないのだろうけれど…）


結果の画像と「うまくいかない」だけの情報から
＞なぜでしょうか？
と言われても、原因はいくらでも考えられるので、「そうなるように指定しているから」としか言いようがありません。

まぁ、ありそうなところを挙げてみると…

包含要素が何なのかわからないけれど、bodyなどの場合だと、添付画像の上、左の余白を計算に入れていなければ、
＞widthを100%にしましたがはみ出たままです。
は当然の結果とも考えられます。

包含要素に、一時的にborderか背景色を付けて実際のサイズを確認してみればわかるのではないでしょうか。
仮に、画面の横幅を広げたとしても「はみだした」ままなのでは？

また、包含要素には予定のサイズに納まるような指定をしていても、内包要素が親の幅を超えるような場合には、内包要素がはみ出して表示されることがありますので、そのようなケースも考えられます。


ひとまず、このあたりを確認してみれば、質問者様のケースでの原因がわかるのではないでしょうか。

この回答へのお礼

ご回答ありがとうございます。firefoxでは上手くいっていました。何故chromeでははみ出てfirefoxではちゃんと表示されるのでしょうか？
chromeの方でもできていないと実際にデプロイしたときにはみ出てしまいますか？

お礼日時：2021/01/09 19:49