Automatically set iFrame height to that of content, HTML5 or CSS only

Question

Explanation

I've run into an issue in my website; I have conflicting style sheets. Instead of manually changing each class, I'd like to take a different approach, which I hopefully could apply to other projects in the long run. After doing some research, creating a seperate web page and utilizing an IFrame on the original webpage seems best, however I wouldn't want users to notice any difference. Because of this it would have to be seamless, and have the height automatically adjust to that of the content on the external web page. In theory I could apply CSS to make the iFrame seamless, and set the height to either height:100%; or height:auto; which would ideally make the iFrame height that of the content.

However, both height settings don't affect the content inside the iFrame itself but by the container of the iFrame, meaning height:100%; would take up 100% of webpage it's being displayed on. I've seen answers to similar questions, however they all involve javascript for the solution. I'd like to avoid javascript, as not only am I not educated in javascript but I personally believe that there can be another way without involving another programming language.

TLDR In other words, I would like to create a completely seamless iFrame, displaying the contents of a different webpage. The height should automatically adjust to that of the content inside it. The end result should implement another webpage seamlessly without users noticing it as any different to the rest of the web page.

Code

I found a helpful question which helped me out writing the code, however it doesn't fully work as intended. The iFrame completely replaces all of web page instead of adding onto it (Example below). I didn't paste in my exact code, I trimmed it down to only keep the relevant parts.

CSS

html, body, iframe { height: 100%; }
html { overflow: hidden; }

HTML

<iframe src="https://example.com/"  width="100%" scrolling="yes" frameborder="0">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>

Output

html, body, iframe { height: 100%; }
html { overflow: hidden; }

<iframe src="https://example.com/"  width="100%" scrolling="yes" frameborder="0">
<h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>

Desired Output

To show you the desired output, I downloaded the webpage from the iFrame and set css rules to simulate what I want. This is not an actual solution.

    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;

    }
    #iFrame {
        width: 600px;
        margin: 5em auto;
        padding: 50px;
        background-color: #fff;
        border-radius: 1em;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        body {
            background-color: #fff;
        }
        #iFrame {
            width: auto;
            margin: 0 auto;
            border-radius: 0;
            padding: 1em;
        }
    }
    #Desired {
      background-color: white;
    }

<div id="iFrame">
    <h1>Example Domain</h1>
    <p>This domain is established to be used for illustrative examples in documents. You may use this
    domain in examples without prior coordination or asking for permission.</p>
    <p><a href="http://www.iana.org/domains/example">More information...</a></p>
</div>
<div id="Desired">
  <h2>Lorem Ispum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vitae est finibus dapibus. Maecenas convallis ante turpis. Pellentesque eget interdum mi. Sed scelerisque rhoncus eleifend. Quisque tortor massa, molestie non odio et, tristique placerat enim. Fusce id massa eleifend, placerat massa at, auctor purus. Cras posuere augue et dolor convallis, at vulputate elit tincidunt. Morbi ut imperdiet orci. Donec commodo est metus, sit amet laoreet nisl mattis a. Sed magna nunc, molestie sed risus vel, faucibus euismod orci. Mauris bibendum, quam a lacinia euismod, ex mi laoreet odio, a tincidunt nisl neque in sapien</p>
</div>

Thank you everyone, I looked forward to hearing what you have to say.

EDIT Reworded post