Conversations with side bar

by Daniel Mejia

HTML

<div class="container">
  <div class="img-wrap">
    <div class="img-content">
      <div class="image">
        <img src="http://lorempixel.com/1024/768/sports/1" alt="">
      </div>
    </div>
    <div class="img-sidebar">
      <img src="http://lorempixel.com/1024/768/sports/1" alt="">
      <img src="http://lorempixel.com/1024/768/sports/2" alt="">
      <img src="http://lorempixel.com/1024/768/sports/3" alt="">
      <img src="http://lorempixel.com/1024/768/sports/4" alt="">
      <img src="http://lorempixel.com/1024/768/sports/5" alt="">
      <img src="http://lorempixel.com/1024/768/sports/6" alt="">
      <img src="http://lorempixel.com/1024/768/sports/7" alt="">
      <img src="http://lorempixel.com/1024/768/sports/8" alt="">
      <img src="http://lorempixel.com/1024/768/sports/9" alt="">
      <img src="http://lorempixel.com/1024/768/sports/1" alt="">
      <img src="http://lorempixel.com/1024/768/sports/2" alt="">
      <img src="http://lorempixel.com/1024/768/sports/3" alt="">
      <img src="http://lorempixel.com/1024/768/sports/4" alt="">
      <img src="http://lorempixel.com/1024/768/sports/5" alt="">
      <img src="http://lorempixel.com/1024/768/sports/6" alt="">
      <img src="http://lorempixel.com/1024/768/sports/7" alt="">
      <img src="http://lorempixel.com/1024/768/sports/8" alt="">
      <img src="http://lorempixel.com/1024/768/sports/9" alt="">
    </div>
  </div>

  <div class="img-wrap">
    <div class="img-content">
      <div class="image">
        <img src="http://lorempixel.com/768/1024/nature/0" alt="">
      </div>
    </div>
    <div class="img-sidebar">
      <img src="http://lorempixel.com/1024/768/nature/1" alt="">
      <img src="http://lorempixel.com/1024/768/nature/2" alt="">
      <img src="http://lorempixel.com/1024/768/nature/3" alt="">
      <img src="http://lorempixel.com/1024/768/nature/4" alt="">
      <img src="http://lorempixel.com/1024/768/nature/5" alt="">
      <img...

CSS

.container {
  position: relative;
}

.img-wrap {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (doesn't work very well) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin: 2em;
}

.img-content {
  -webkit-box-ordinal-group: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 1;
  /* OLD - Firefox 19- */
  -ms-flex-order: 1;
  /* TWEENER - IE 10 */
  -webkit-order: 1;
  /* NEW - Chrome */
  order: 1;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 90%;
  /* No flex here, other cols take up remaining space */
  -moz-box-flex: 1;
  /* Without this, Firefox 19- expands to widest paragraph, overrides width */
  background: white;
  max-height: inherit;
  padding: 5px;
}

.img-sidebar {
  -webkit-box-ordinal-group: 3;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 3;
  /* OLD - Firefox 19- */
  -ms-flex-order: 3;
  /* TWEENER - IE 10 */
  -webkit-order: 3;
  /* NEW - Chrome */
  order: 3;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* Firefox 19- */
  width: 10%;
  /* For OLD syntax, otherwise collapses. */
  -ms-flex: 1;
  /* TWEENER - IE 10 */
  -webkit-flex: 1;
  /* NEW - Chrome */
  flex: 1;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background: #ccc;
  overflow-y: auto;
  padding: 5px;
}

.image {
  height: inherit;
  max-height: inherit;
  margin-left: auto;
  margin-right: auto;
}

.image img {
  /*
  height:inherit;
  max-height:inherit;*/
  max-width: 100%;
}

.img-sidebar img {
  width: 100%;
}

JavaScript

function resize() {
  $('.img-wrap').each(function() {
    var height = $(this).find('.img-content .image img').height();
    var sidebar = $(this).find('.img-sidebar');
    sidebar.css('max-height', height + 'px');
  });
}

//Initial sidebar resize
resize();

//Resize sidebar on window resize
$(window).on('resize', function() {
  resize();
})