Animate Div to 100% width css

Question

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:

http://jsfiddle.net/tVHYg/1662/

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%;
}

    <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>
    
        <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>

Answer 1

The percent is the issue in regards to your code and probably because you have width: 100%; while at the same time you have max-width: 50px; for the inner class .

Using pixels fixes that. any pixels over the size of the boxes will simply animate it faster e.g max-width: 1000px; will just speed up the animation without enlarging the box boundaries

.contents {
    white-space:nowrap;
    display:inline-block;
}

.inner {
    background:#c3c;
    width: 100%;
    max-width:50px;
    
    overflow:hidden;
    transition: all .5s ease-in-out;
    padding: 5px 0 5px 0;
}

.contents:hover .inner {
    max-width:1250px;
}

    <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>
    
        <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>

Answer 2

You can do this with display: inline-flex

.container {
  display: inline-flex;
}

.contents {
  display: inline-flex;
  transition: all .3s ease-in;
  overflow: hidden;
  width: 50px;
  margin: 2px;
}

.inner {
  background:#c3c;
  white-space:nowrap;
  padding: 10px 0;
}

.contents:hover {
  transition-delay: 0.2s;
  width: 100%;
}

<div class="container">
  <div class="contents">
    <div class="inner">A bit of text never hurt anyone</div>
  </div>

  <div class="contents">
    <div class="inner">A bit of text never hurt anyone</div>
  </div>
</div>