Вы можете сделать это без установки высоты, вам просто нужно установить минимальную высоту, см. Пример ниже
Примечание - в нормальном состоянии .c
вы можете установить минимальную высоту в 1 пиксель, если Вы хотите, но это ускорит анимацию, потому что вы идете от 300 до 1
.a {
height: 300px;
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow-y: auto;
}
.b {
background: gray;
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
flex: 1 1 auto;
}
.c {
max-height: 200px;
min-height: 100px;
background: slategray;
color: white;
overflow-y: hidden;
transition: 1s;
}
.c:hover {
max-height: 300px;
min-height: 300px;
}
.c-parent {
flex: 0 0 auto;
}
<div class="a">
<div class="b">
Background DIV
</div>
<div class="c-parent">
<div class="c">
Hover over me<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
</div>
</div>
</div>