css3 height transition on an absolute positioned div to overflow auto fails

Question

this example is pretty selfexplanatory i guess, and i have no idea, why the div first shrinks, and than pops to the right height.

here is the example code

<div class="block">
  <div class="abs">
    hover me!!<br/>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  </div>
</div>

and the CSS

.block {
  position: relative;
  height: 500px;
  width: 500px;
}

.abs {
  position: absolute;
  height: 40px;
  width: 200px;
  background-color: yellow;
  overflow: hidden;
}

.abs:hover {  height: auto; transition: height 1s; }

and here is a fiddle link, with the content: http://jsfiddle.net/3G7vG/

i test this with the chromium release Version 31.0.1650.63 Debian jessie/sid (238485) on my linux box

Mabedan · Accepted Answer · 2014-02-13T10:01:02.140

5

height:auto is not support as part of a transition in css3.

You should rather try min-height, max-height, or transform (using the scalex(aNumberBetweenZeroAndOne))

http://jsfiddle.net/LefQV/

edited Feb 13 '14 at 10:01

answered Feb 13 '14 at 09:45

Mabedan

857
8
30

Here's a funky solution http://jsfiddle.net/E8Tre/ , if you want to get your animation timing right. the problem with the solution in the answer, is that the 1 second is spent to extend the `max-height` from 40 to 300, and the growth of height will stop at whenever the height of the content inside `.abs` is attained, which could very possibly be before the 1000 milliseconds – Mabedan Feb 13 '14 at 10:10
in my case, this is not an issue, so thanks for the solution ;) – easteregg Feb 13 '14 at 10:13

score 0 · Answer 2 · answered Feb 13 '14 at 10:06

Because you set the height of the div.abs to 40px

height: 40px;

Changed it to auto

 height:auto;

The full style is

 .abs {
            position: absolute;
            height:auto;
            width: 200px;
            background-color: yellow;
            overflow: hidden;
        }

score -1 · Answer 3 · answered Feb 13 '14 at 10:07

trying using this as your css:

.block {
position: absolute;
height: 250px;
width: 250px;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
overflow:hidden;}
.abs {
position: absolute;
height: 40px;
width: 200px;
background-color: yellow;
overflow: hidden;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;}
.abs:hover {  height: 100%; }

try this

css3 height transition on an absolute positioned div to overflow auto fails

3 Answers3

Linked