iFrame has fixed width of 300px, without any styling defining 300px

[crevulus]

Describe the bug Whatever content I place inside the iframe, the width is always 300px. Will not move; overflow is hidden if I add something >300px and still takes up 300px if my content is smaller than that.

To Reproduce Steps to reproduce the behavior:

1. Set up new web page with desired content.
2. Set up second page; Import script; add iframe to index.html
3. Inspect element width.

Expected behavior Width should change dynamically, like height does.

Screenshots Three screenshots attached, showing the iframe width always at 300px regardless of content width.

Desktop (please complete the following information):

• OS: Mac OS 10
• Browser: Chrome 97

Additional context I also made two code sandboxes, and embedded one site in the other via an iframe. Unfortunately the iframe is hidden for some reason, but if you inspect and look for the iFrame with id="inlineFrameExample" (and not code sandbox's button iframe) you'll see it's 300px wide: https://exzts.csb.app/ The code for the parent site is here: https://codesandbox.io/s/eloquent-flower-exzts?file=/index.html The code for the framed site is here: https://codesandbox.io/s/iframe-test-ss8fs

[davidjbradshaw]

You have a lot of CSS on your iFrame tag. Other than that not really sure. Think you will have more luck on StackOverflow.

[crevulus]

I'm not sre it is purely CSS-related, though. I removed all styles from the embedded site and the parent site except for z-index, and set sizeWidth: true in my window.iFrameResize options. Still always sizing my iframe to be 300px wide, but height resizing is working perfectly.

Not sure why the resizer isn't picking up on width change.

[nternetinspired]

This is the native behaviour of an iframe, actually any replaced element in html has a default height of 150px and default width of 300px. Solution? Define the elements size.

[tsr22]

I'm not sre it is purely CSS-related, though. I removed all styles from the embedded site and the parent site except for z-index, and set sizeWidth: true in my window.iFrameResize options. Still always sizing my iframe to be 300px wide, but height resizing is working perfectly. Not sure why the resizer isn't picking up on width change.

Defining the width attribute inside of the iFrame should fix that for you. EX: <iframe src="URL_HERE" width="100%"></iframe>