title: Floated div 100% height of parent inline-block div
body: <p>I am making a simple slideshow and I have got the javascript working very easily. However the layout is not going as well. The current image is display in big with a fixed width of 80% and the height can change to keep its aspect ratio.</p>
  
  <p>The problem with this is that I want the the current image to be displayed in its correct aspect ratio (which it is) and I want the thumbnail bar on the right to have a scrollbar if it overflows this height. </p>
  
  <p>Here is a demo on jsfiddle: <a href="http://jsfiddle.net/ZTBNR/1/" rel="nofollow">http://jsfiddle.net/ZTBNR/1/</a></p>
  
  <p>Here is the code:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.slideshow{
   width: 100%;
   background: #B8B8B8;
   display: inline-block;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   border: 1px solid #000;
   overflow: hidden;
  }
  div.slideshow &gt; div.current-slide_wrapper{
   padding: 10px;
   float: left;
   width: 80%;
   display: inline-block;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   overflow: hidden;
   border-right: 1px solid #000;
  }
      div.slideshow &gt; div.current-slide_wrapper img{
       width: 100%;
       vertical-align: bottom;
       cursor: pointer;
      }
  div.slideshow &gt; div.other-slides_wrapper{
   padding: 10px 15px;
   float: right;
   width: 20%;
   height: 100%;
   display: block;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   overflow-y: auto;
   overflow-x: hidden;
  }
      div.slideshow &gt; div.other-slides_wrapper img{
       border: 5px solid #FFF;
       width: 100%;
       cursor: pointer;
       margin-left: -5px;
      }
      div.slideshow &gt; div.other-slides_wrapper img:hover{
       border: 5px solid #EAEAEA;
      }
      div.slideshow &gt; div.other-slides_wrapper img.current{
       border: 5px solid #000;
      }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h3&gt;Screenshots&lt;/h3&gt;
  &lt;div id="slideshow-1" class="slideshow_wrapper"&gt;
   &lt;div class="slideshow"&gt;
    &lt;div class="current-slide_wrapper"&gt;
     &lt;img class="current-slide" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/&gt;
    &lt;/div&gt;
    &lt;div class="other-slides_wrapper"&gt;
     &lt;img class="other-slide current" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/&gt;
     &lt;img class="other-slide" data-slide="2" src="/path/to/image/website-screenshot2.jpg"/&gt;
     &lt;img class="other-slide" data-slide="3" src="/path/to/image/website-screenshot3.jpg"/&gt;
     &lt;img class="other-slide" data-slide="4" src="/path/to/image/website-screenshot4.jpg"/&gt;
     &lt;img class="other-slide" data-slide="5" src="/path/to/image/website-screenshot5.jpg"/&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>