Animer la largeur d'un élément de 0 à 100 %, avec lui et son conteneur ne prenant que la largeur nécessaire, sans largeur prédéfinie, en CSS3 ou jQuery

Question

http://jsfiddle.net/nicktheandroid/tVHYg/

En survolant .wrapper, l'élément enfant .contents devrait s'animer de 0px à sa largeur naturelle. Puis lorsque la souris est retirée de .wrapper, il devrait s'animer de nouveau vers 0px. L'élément .wrapper devrait seulement être aussi large qu'il en a besoin (permettant à .contents de grandir), donc .wrapper devrait grandir en largeur et rétrécir en largeur comme le fait .contents. Il ne devrait pas y avoir de largeur définie pour .contents. J'utilise CSS3, mais cela pourrait être fait avec jQuery, cela serait bien.

Le problème : Voir le JSfiddle

1. .wrapper n'est pas seulement aussi large qu'il en a besoin.
2. quand .contents grandit, lorsqu'il est presque à sa pleine largeur, il saute en bas à la ligne suivante

3. En sortant le curseur de .wrapper, .contents disparaît, alors qu'il devrait s'animer vers 0px

   .wrapper { display: inline-block;

   height: 20px;
   width: auto;
   
   padding:10px;
   
   background:#DDD;

   }

   .contents { display:inline-block;

   width:0%;
   
   white-space:nowrap;
   overflow:hidden;
   
   background:#c3c;

   }

   .wrapper:hover .contents { -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out;

   width:100%;

   }

   +
   Voici le contenu de cette div

Answer 1

Je n'ai pas pu le faire fonctionner sans spécifier une largeur mais le css suivant a fonctionné

.wrapper {
    background: #DDD;
    padding: 10px;
    display: inline-block;
    height: 20px;
    width: auto;
}

.contents {
    background: #c3c;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    visibility: hidden;
    width: 1px;
    -webkit-transition: width 1s ease-in-out, visibility 1s linear;
    -moz-transition: width 1s ease-in-out, visibility 1s linear;
    -o-transition: width 1s ease-in-out, visibility 1s linear;
    transition: width 1s ease-in-out, visibility 1s linear;
}

.wrapper:hover .contents {
    width: 200px;
    visibility: visible;
}

Je ne suis pas sûr que vous pourrez le faire fonctionner sans définir une largeur.