title: How to make a horizontally scrollable div with image thumbnails inside in bootstrap3
body: <p>I am trying make a horizontally scrollable div which has 3 sub-divisions inside. The sub-divisions have 4 image thumbnails inside them each. I am having trouble to get the this layout working.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="col-xs-12"&gt;
      &lt;div class="canvas-scrollable"&gt;
          &lt;ul class="list-inline clearfix"&gt;
              &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
                  &lt;table class="item-inner"&gt;
                      &lt;tr&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/li&gt;
             &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
                  &lt;table class="item-inner"&gt;
                      &lt;tr&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/li&gt;
              &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
                  &lt;table class="item-inner"&gt;
                      &lt;tr&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                          &lt;td class="item-thumb"&gt;
                              &lt;img class="img-responsive" src="images/#"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.canvas-scrollable{
      width: 100%;
      height: auto;
      overflow-y: hidden;
      overflow-x: auto;
  }
  
  .canvas-scrollable .item-inner{
      height: 300px;
      margin: 10px;
      /*white-space:nowrap;*/
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,0.1);
      -webkit-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
      box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
  }
  
  .item-thumb{
    width: 50%;
    height:50%;
    padding: 4px;
    border: 1px solid green;
  }
  
  .item-thumb img{
     height: 100%;
     object-fit: cover;
  }
  </code></pre>
  
  <p>The images won't fit inside the container divs. the height: 100% is making images occupy the entire 300px height of the outermost div. </p>
  
  <p>Please edit my <a href="http://jsfiddle.net/chandannadig/xbo1dsmh/" rel="nofollow">JSFiddle</a> here.
  Hope I was clear enough with my question</p>