css - css3 transition from width auto to "n" px

how do I apply css transition to a div which has initial width set as auto

However if I set the initial width to some number say 50px, the transition kicks in.

Here is the - DEMO

.container {
  width: 200px;
  background: red;
  height: 50px;
}



.child1 {
  background: black;
  display: inline-block;

}

.child2 {
  background: blue;
    display: inline-block;
  width: auto;  /* this does not work */


    /* width: 50px; */ /* this works */
  float: right;
  -webkit-transition: width 2s;
      transition: width 2s;
}

.child2:hover {
  width: 100px;
}