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

Question

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

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

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

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

Я не понимаю, что не так с моим кодом. Вот это Дж.С.Фиддл: 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');
    }

});

Answer 1

Проблема у вас первая $ в if ($($back.outerHeight() < $back.prop('scrollHeight'))) {

Так должно быть: if ($back.outerHeight() < $back.prop('scrollHeight')) {

Демо здесь