iframeで読み込んだページ切れてしまう

Question

買い物かご近くにiframeで「お茶うけにおすすめ」としてスイーツを表示させようと
していますが、ボックスの右側が切れてしまいます。
何が原因でしょうか。

https://item.rakuten.co.jp/morinoen95/1050150/

iframe内のソースは以下の通りです。














    お茶うけにおすすめ
    
    
    
    
    





宜しくお願い致します。###HR######IMG0c54698a754b0362b436b90be83a962cd.jpegIMG0###

Answer

ECマスターズの田中です。

いただいたiframe周りの構造を見たところ、
横幅350pxの画像に対し、
それを囲むの内側が380px、
加えて余白が左右計2em（２文字ぶんの高さ）、
さらに枠線で左右計6px取られており、
Mac上のChromeの場合は合計で418pxとなり、
iframeに設定された横幅400pxを超えるため、
このような見た目になります。

解決方法としては、に対して
box-sizing: border-box; width: 400px;
とご設定いただくことで、
枠線まで含めた横幅をwidthで（つまり400pxと）ご指定いただくことができます。

あるいは、divタグはブロック要素なので、
widthの指定を外していただければ、
iframeの横幅いっぱいに表示させることができます。

Answer

お世話になっております。

ご連絡が遅くなり申し訳ございません。

解決方法を試したところ、無事に解決しました。
ありがとうございました。