title: Full height responsive table with contents
body: <p>I have application where I'm using bootstrap. On this app one of my views contains table on left side and some data on right side. In order to have best user experience I stretch the table to full height so user can see as many rows as his device lets him. For the rest rows he can use scrollbar. </p>
  
  <p>The problem is that if user has really small device then data on ride side goes out of container(gray area) which looks ugly. Is there any option to make my ride side not go outside gray area? </p>
  
  <p>Please note that my container has to be dynamic 100% height to cover whole page. Im looking for solution that doesnt use javascripts.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row my-row"&gt;
      &lt;div class="col-sm-6 my-col col-1"&gt;
        &lt;div class="my-table"&gt;
          &lt;div class="my-table-wrapper"&gt;
            &lt;div class="my-table-wrapper-2"&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
              &lt;div class="table-row"&gt;data&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6 my-col col-2"&gt;
        &lt;br&gt;2 of 2 &lt;br&gt;2 of 2 &lt;br&gt;2 of 2 &lt;br&gt;2 of 2 &lt;br&gt;2 of 2 &lt;br&gt;2 of 2 &lt;br&gt;2 of 2 &lt;br&gt;2 of 2 &lt;br&gt;2 of 2&lt;br&gt;2 of 2&lt;br&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/aq9Laaew/71230/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>(Works in chrome only, not sure why)</p>