html div width 100,html - Animate Div to 100% width css - Stack Overflow

Problem

I am trying to animate a div to 100% of it's child's width. I'm animating the max width on hover, but it is pushing the div to it's right away very abruptly instead of animating it smoothly to the right. Can anybody see why it isn't animating correctly? I would prefer not to use javascript if possible.

My Attempt

I have copied the fiddle below:

into the following source

.contents {

white-space:nowrap;

display:inline-block;

}

.inner {

background:#c3c;

width: 100%;

max-width:50px;

overflow:hidden;

transition: all .3s ease-in-out;

padding: 5px 0 5px 0;

}

.contents:hover .inner {

max-width:100%;

}

A bit of text never hurt anyone

A bit of text never hurt anyone