JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    This div is forcing the site to be 960px width.<br/>
    Also It holds all the content that the site has
    <div id="wrapextra">
        <div id="extra">
            I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border
        </div>
        <script>fixHeight();</script>
    </div>
    Additional content that is<br/>
    below the absolute positioned div
</div>

CSS

html, body {margin: 0}
    #container {
        width: 960px;
        margin: 0 auto;
        background-color: #ddd;
    }
    #wrapextra {
        background-color: #f99;
    }
    #extra {
        position: absolute;
        left: 0;
        right: 0;
        min-width: 960px;
        height: auto;
        background-color: #ff9;
    }

JavaScript

function fixHeight() {
    var exTag = document.getElementById("extra");
    exTag.parentNode.style.height = (parseInt(exTag.clientHeight)) + "px";
}

(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

        // The actualResizeHandler will execute at a rate of 15fps
      }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    fixHeight();
  }

}());