Transition height not working

Question

I am trying to create a simple CSS transition that changes the height and width of a square box. The width seems to be changing with animation but the height does not animate. How can I fix this? Or what am I doing wrong here?

p {
  width: 100px; 
  height: 200px; 
  transition: width 3s;
}

p:hover {
  width: 300px; 
  height 500px;
}

Answer 1

To transition both width and height you must change the transition setting like below:

p {width: 100px; height: 200px; transition: all 3s;}

Your code was also missing a : in the height property setting within p:hover.

p:hover {
  width: 300px; 
  height: 500px; /* added missing : */
}

p {
  display: block;
  border: 1px solid black;
}
p {
  width: 100px;
  height: 200px;
  transition: all 3s;
}
p:hover {
  width: 300px;
  height: 500px;  /* added missing : */
}

<p>abcd</p>

As mentioned in godfrzero's answer, if you want to transition only height and width (but not any other property's value change) don't use the all method.

Answer 2

If you're sure you only want to animate the height and width properties and not all CSS properties, you can also do this:

p:hover {
  height: 300px;
  width: 500px;
  transition: height, width linear 3s;
}

Your current CSS code only instructs the browser to animate the width.

Answer 3

If you really want to keep height at auto, I have found that using max-height: auto; for the element's ending state and max-height: 0px (or whatever you start with) for the initial property keeps both the transition and auto height sizing.