CSS3 Transition: how to add transition on hover to this div? - html

Question

I add some content on this div that will be visible on hover.
It work till here: jsbin.com/ipajas/
But as the content is loaded dynamically, I don't know it's exactly the content's height. So I change the height from height:250px; to height:auto;
And the problem is: in that case, the transition don't work anymore. jsbin.com/ipajas/2
Here is the code:
HTML:
<a>
<div class="divabsence" id="id" onClick="expand()">
chose your color:
<p> red <input type="checkbox" id="button"></p>
<p> blue <input type="checkbox" id="button"></p>
<p> green <input type="checkbox" id="button"></p>
<p> white <input type="checkbox" id="button"></p>
</div>
</a>
CSS:
.divcolor
{
width:120px;
height:30px;
background:red;
transition: 1s;
overflow:hidden;
}
.divcolor:hover
{
height:auto;
}
UPDATE
It seems to be impossible so, I've just add this as a temporary solution:
height: 150px; overflow:scroll; jsbin.com/ulodil/4

Answer 1

According to the CSS Specs only length, percentage, or calc are valid types, not auto.
Instead of height you can use max-height with a big enough value:
.divcolor
{
max-height:30px;
...
}
.divcolor:hover
{
max-height: 1000px; <- something just big enough for your needs
}

Answer 2

You could load everything into a <ul> and set the height dynamically based off the number of <li> elements. Depending on how the content is loaded dynamically you could do it through JavaScript or some server-side scripting.
You could add as many or as little <li> elements and the height will adjust.
JSBIN - Sample Here
function adjustHeight()
{
var itemList = document.getElementById('color-list');
var items = itemList.getElementsByTagName('li');
var listHeight = items.length * 25;
document.getElementById('id').style.height = (50 + listHeight) + "px";
}