CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
manish
manish

Reputation: 956

max-height transition not working when max-height is reduced

If the max-height of a div is increased, the css transition works fine, but when the max-height of the same div is decreased, the height changes without transition.

Here's the jsfiddle of the code similar to mine. 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>

Upvotes: 0

Views: 4497

Answers (2)

Fernando Madriaga
Fernando Madriaga

Reputation: 458

You wrote in the hover pseudo-class the max-height and the height. If you use min-height instead of height, it will work, but you have to set in both blocks:

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

.c:hover {
  max-height: 300px;
  min-height: 300px;       <=====
}

This shuld solve your issue.

Upvotes: 2

Huangism
Huangism

Reputation: 16438

You can do this without setting a height, you jsut have to set a min-height, see below example

Note - in the normal .c state, you could set min-height to 1px if you want but it will speed up the animation because you are going from 300 to 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>

Upvotes: 1

Related Questions