JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">fixed header</div>
<div id="sidebar-and-results">
    <div id="sidebar">
       sidebar
    </div> <!-- /#sidebar -->
    <div id="primary">
        <div id="title">Title</div>
        <div id="results-pane">Question: Why is border-box not working as expected on #primary element?</div>
        <input type="button" id="clickme" value="click to add more content to body" />
        <br/>
        <span id="extracontent">text</span>
    </div> <!-- /#primary -->
    <div class="footer">Footer, always at bottom of content</div>
</div> <!-- /#sidebar-and-results -->

CSS

body  { 
    margin: 0;
    padding: 0;
}
div { 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;

}
#header { 
    width: 100%;
    position: fixed;
    height: 35px;
    background: red;
    z-index: 1000;
}
#sidebar-and-results {
  margin-top: 35px;
  overflow: hidden;
  position: relative;
  min-height: 300px;
  float: left;
  width: 100%;
  background-color: blue;
}
#sidebar {
  background: grey;
  width: 220px;
  float: left;
  height: 100%;
  position: absolute;
  left: 0;
  min-height: 300px;
}
#primary { 
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  min-height: 300px; 
  margin-left: 220px;
  position: relative;
  border-left: 1px solid #D4D4D4;
}
.footer { 
    background: orange;
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 100%;
}

JavaScript

$('#clickme').click(function() { 
    var mystr = '';
    for (var i = 0; i < 50; i++) { 
     mystr += ' lorem ipsum dolor sit'; 
    }
    //mystr = "lorem ipsum dolor sit";
   $('#extracontent').text(mystr);
});