Cross-Domain Iframe Resizing in ReactJS

Question

I want to embed the website: https://lipsum.com into my website. I have tried using the iframe-resizer-react package in ReactJS, but it doesn't show the full content properly. What should I do for making it possible to force my React web to show the entire contents of that webpage? How can I force the web to merge iframe scrollbar to parent, so there will be only one scrollbar that scrolls through iframe and another contents on my react web?

Here is the code:

import React from "react";
import "./styles.css";
import IframeResizer from "iframe-resizer-react";

export default function App() {
  return (
    <IframeResizer
      src="https://lipsum.com"
      log
      heightCalculationMethod="bodyOffset"
      inPageLinks
      style={{ width: "1px", minWidth: "100%" }}
      frameBorder="0"
      enablePublicMethods
    />
  );
}

You can also access the sandbox here: https://codesandbox.io/s/lucid-lovelace-958v9?file=/src/App.js

Answer 1

Add this to css

html,
body,
#root {
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
}

and

 <IframeResizer
      src="https://lipsum.com"
      log
      heightCalculationMethod="lowestElement"
      inPageLinks
      style={{
        width: "1px",
        minWidth: "100%",
        minHeight: "100%"
      }}
      frameBorder="0"
    />

Answer 2

Did you figure out the answer?