css3 transition from width auto to “n” px [duplicate]

Answer 1

Instead of animating width try animating min-width:

.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 */
  min-width: 0;
  float: right;
  -webkit-transition: all .5s;
  transition: all .5s;
  padding-left: 0;
}
.child2:hover {
  min-width: 100px;
}

  

    child1
  

  

    child2