Увеличьте высоту div, если содержимое переполняется с помощью jquery/javascript

У меня есть два столбца с двумя перекрывающимися элементами div. Если щелкнуть передний div, он исчезнет и появится задний div.

Затем задний div должен установить для своей высоты значение auto, если он имеет переполненное содержимое, и сохранить его высоту, когда это не так. Обертка (.thumb) также меняет высоту в зависимости от высоты заднего блока.

Код внутри оператора if работает, но не проверяет условие. Он также выполняет код, когда содержимое не переполняет div, поэтому здесь также устанавливается высота auto, уменьшая размер div. Я хочу, чтобы div без переполнения сохранял свою первоначальную высоту.

Я помещаю высоты как externalHeight, так и scrollHeight в консоль, чтобы проверить, какие высоты он читает. Div без переполнения говорит, что его внешняя высота больше, чем scrollHeight, поэтому он не должен выполнять оператор if. Я поместил туда оператор else, чтобы проверить, выполняет ли он console.log(), но это не так.

Я не понимаю, что не так с моим кодом. Вот JSfiddle: https://jsfiddle.net/Isoldhe/5scfqzzh/33/

HTML:

<div class="main">
<div class="container">

  <div class="row">
      <div class="thumb col-sm-6">
        <div class="front"></div>
        <div class="back">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque fecimus. Quorum sine causa fieri nihil putandum est. Hoc ne statuam quidem dicturam pater aiebat, si loqui posset. Quibusnam praeteritis? Quod si ita sit, cur opera philosophiae sit danda nescio. An hoc usque quaque, aliter in vita? An, partus ancillae sitne in fructu habendus, disseretur inter principes civitatis, P.</p>
        </div>
      </div>

      <div class="thumb col-sm-6">
        <div class="front"></div>
        <div class="back">
          <p>Lorem ipsum dolor...</p>
        </div>
      </div>

  </div>
</div>
</div>

CSS:

.main {
  width: 100%;
  position: relative;
}

.thumb {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

.front {
  position: absolute;
  background: blue;
  width: 150px;
  height: 100px;
  padding: 10px;
  z-index: 10;
  border-radius: 15px;
  border: 3px solid rgb(163, 0, 0);
  cursor: pointer;
}

.back {
  position: absolute;
  background: green;
  width: 150px;
  height: 100px;
  font-size: 1em;
  text-align: center;
  border-radius: 15px;
  z-index: 9;
  padding: 10px;
  border: 3px solid rgb(163, 0, 0);
  overflow: hidden;
}

JS:

$('.front').click(function() {
    $(this).fadeOut(500);

    var $back = $(this).siblings('.back');
    var $thumb = $(this).parent('.thumb');

    console.log($back.outerHeight());
    console.log($back.prop('scrollHeight'));

    if ($($back.outerHeight() < $back.prop('scrollHeight'))) {
      $back.height('auto'); // changes height so all content is visible
      $thumb.height($($back).height() + 60); // changes thumb height to whatever the back div height is + adds some margin
    }
    else {
      console.log('outerHeight is bigger than scrollHeight');
    }

});