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.

EDIT: To be clear, My problem is that I want to dynamically change the width of an iframe (cross-domain), but it always renders at 300px and will not change. I’m using the iframe-resizer package to successfully dynamically change the height, but that’s nto working on the width.

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

<script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/[email protected]/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. I also viewed the CSS specs which says default will be default set to 300px under certain conditions, but I cannot figure out how to dissatisfy those conditions so that the 300px rule doesn’t apply.