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

I'm using the iframe-resizer package to dynamically change the size of an iframe depending on content.

However, before even trying any dynamic resizing, I run into an issue with the basic iframe: it's always 300px in width. 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.

In the parent site, I'm embedding the iframe as follows:

<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js">
</script>
<script type="text/javascript">
    var i = new URLSearchParams(window.location.search).get("openWidget"); document.write('<iframe id="inlineFrameExample" title="Inline Frame Example" style="position: fixed; zIndex: 1000; bottom: 0; right: 0" frameBorder="0" scrolling="no" src="http://localhost:3001?openWidget=' + i + '"></iframe>');
    window.iFrameResize({ log: true }, '#inlineFrameExample')
</script>

And the content in my for my framed site, I have the following elements and styling:

    <div className="App" id="App2">
      {openWidget && <div className="button">OK</div>}
      {showMessage && <section>This is a message</section>}
      <div>
        <button className="button" onClick={() => setShowMessage(!showMessage)}>
          Msg
        </button>
        <button className="button" onClick={() => setOpenWidget(!openWidget)}>
          {openWidget ? "-" : "+"}
        </button>
      </div>
    </div>

.App {
  text-align: center;
  float: right;
}

.container {
  display: flex;
  justify-content: flex-end;
  float: right;
}

section {
  background-color: mediumseagreen;
  color: white;
  width: 500px;
}

.button {
  width: 100px;
  height: 100px;
  background-color: mediumseagreen;
  color: white;
  text-align: center;
  float: right;
}

Note that there's nothing in there about width being 300px. There are other widths, but the iframe seems to ignore them and always set itself to 300px.

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

UPDATE: I also removed all css styling from both the parent site and the framed site. Still always stuck at 300px.

from Recent Questions - Stack Overflow https://ift.tt/3GlQ8JX
https://ift.tt/eA8V8J