JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-element">Some div that has greater width than the inner div</div>
<div id="iframe-wrapper">
    <iframe src="http://www.apple.com/" scrolling="auto"></iframe>
</div>

CSS

div#iframe-wrapper {
    position: fixed;
    top: 150px;
    left: 300px;
    right:300px;
    bottom: 45px;
    width: 200px;
}

div#iframe-wrapper iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 100px;
    height: 100%;
    width: 100%;
}

div#top-element{
    width: 800px;
    color: black;
    background: orange;
}
}