Как добиться перехода высоты элемента, когда высота цели не известна (не зафиксирована)

Question

Как добиться перехода высоты элемента, если высота цели неизвестна?

Если я заменим height: unset на height: 100px, анимация будет работать. Проблема в том, что высота должна быть рассчитана на основе содержимого и не одинакова для всех элементов.

Аналогично, если я использую max-height вместо height, я должен указать жестко закодированное значение ( например, 1000px), но у него есть недостаток: для короткого элемента большую часть времени перехода анимация не воспроизводится.

$('.c').change(function() {
    for(var i = 1; i <= 3; i++) {
        var item = $('#item' + i)
        if($('#c' + i).prop('checked')) item.addClass('show')
        else item.removeClass('show')
    }
})

.item {
    border: 1px solid red;
    position: relative;
    overflow: hidden;
    height: 0;
    transition: all 1s;
}
.item.show {
    height: unset;
    transition: all 1s;
}

<div>
    <input type="checkbox" class="c" id="c1" checked />
    <input type="checkbox" class="c" id="c2" />
    <input type="checkbox" class="c" id="c3" checked />
</div>
<div class="items">
    <div id="item1" class="item show">
        <h3>Lorem ipsum</h3>
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="item2" class="item">
        <h3>Lorem ipsum</h3>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="item3" class="item show">
        <h3>Lorem ipsum</h3>
        Lorem ipsum dolor sit amet.
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вы можете установить height элемента на scrollHeight.

jQuery решение:

$('.c').change(function() {
  const c = $(this);
  const item = $(c.attr('rel'));
  item.css({
    height: item[0].scrollHeight * c.prop('checked')
  })
})

.item {
  border: 1px solid red;
  position: relative;
  overflow: hidden;
  height: 0;
  transition: all 1s;
}

<div>
  <input type="checkbox" class="c" rel="#item1" />
  <input type="checkbox" class="c" rel="#item2" />
  <input type="checkbox" class="c" rel="#item3" />
</div>
<div class="items">
  <div id="item1" class="item">
    <h3>Lorem ipsum</h3>
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="item2" class="item">
    <h3>Lorem ipsum</h3>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
  <div id="item3" class="item">
    <h3>Lorem ipsum</h3>
    Lorem ipsum dolor sit amet.
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>