最大高度转换在最大高度减小时不起作用

Question

如果增加div的max-height，则css过渡工作正常，但是当同一div的max-height降低时，高度会发生变化而不过渡。

这是类似于我的代码的jsfiddle。 https://jsfiddle.net/31sukrxq/43/

.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;
background: slategray;
color: white;
overflow-y: hidden;
transition: 1s;
}
.c:hover {
max-height: 300px;
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>

Answer 1

您可以在不设置高度的情况下执行此操作，只需设置最小高度，请参见以下示例

注意 - 在正常的.c状态下，如果需要，您可以将最小高度设置为 1px，但它会加快动画速度，因为您要从 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>

Answer 2

您在悬停伪类中写了最大高度和高度。 如果您使用最小高度而不是高度，它将起作用，但您必须在两个块中进行设置：

.c {
max-height: 200px;
min-height: 0px;       <=====
background: slategray;
color: white;
overflow-y: hidden;
transition: 1s;
}
.c:hover {
max-height: 300px;
min-height: 300px;       <=====
}

这应该可以解决您的问题。