title: Constraining HandsOnTable to the size of its parent container
body: <p>I realize this is a simplistic example, but I wanted to get some explanation on how HandsOnTable expects to behave within a container.  e.g. we have a Tab where we place HoT and we'd like it to consume 100% of the container space, but right now it doesn't appear to be constrained.</p>
  
  <p>Here's an example.   We'd like it constrained inside the red box.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("DOMContentLoaded", function() {
  
    var
      myData = Handsontable.helper.createSpreadsheetData(200, 100),
      container = document.getElementById('example1'),
      hot;
  
    hot = new Handsontable(container, {
      data: myData,
      rowHeaders: true,
      colHeaders: true,
      fixedColumnsLeft: 2,
      contextMenu: true,
      manualColumnFreeze: true
    });
  
    function bindDumpButton() {
      if (typeof Handsontable === "undefined") {
        return;
      }
  
      Handsontable.Dom.addEvent(document.body, 'click', function(e) {
  
        var element = e.target || e.srcElement;
  
        if (element.nodeName == "BUTTON" &amp;&amp; element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
    bindDumpButton();
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;/style&gt;&lt;!-- Ugly Hack due to jsFiddle issue --&gt;
  
  &lt;script src="http://docs.handsontable.com/0.15.0-beta3/scripts/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://docs.handsontable.com/0.15.0-beta3/bower_components/handsontable/dist/handsontable.full.js"&gt;&lt;/script&gt;
  &lt;link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.15.0-beta3/bower_components/handsontable/dist/handsontable.full.min.css"&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="height: 100px; width: 100px; background-color: red;"&gt;
    &lt;div id="example1" class="hot handsontable"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/jxh52650/" rel="nofollow noreferrer" title="jsfiddle">http://jsfiddle.net/jxh52650/</a></p>