Pliable souple-largeur de la barre latérale en utilisant uniquement CSS

Supposons que j'ai un réductible fixe-largeur de la barre latérale définie comme ceci:

HTML

<div class="container">
  <div class="sidebar" id="sidebar">
    SIDEBAR
  </div>
  <div class="content">
    lorem bla bla
    <button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">
      toggle Sidebar
    </button>
  </div>
</div>

CSS

body {
  margin:0;
}

.container {
  display: flex;
  min-height:100px;
}

.sidebar {
  position: relative;
  left: 0;
  width: 200px;
  background-color: #ccc;
  transition: all .25s;
}

.sidebar.collapsed {
  left:-200px;
  margin-right:-200px;
}

Codepen ici: http://codepen.io/anon/pen/pJRYJb

Alors, voici la question:

Comment puis-je aller à partir de là à une souple-largeur barre latérale?

Voici les contraintes:

  • pas de javascript (je veux le navigateur de traiter avec le layouting – pas moi)
  • la barre latérale ne doit pas chevaucher le contenu
  • lorsque s'est effondré, la barre latérale de droite de la bordure doit être aligné avec la de gauche de la fenêtre de la frontière (pour être en mesure de fixer une position absolue de l'onglet sur le côté droit, ce qui est toujours visible)
  • la largeur de la barre latérale ne faut pas changer de si s'est effondré pour éviter les remboursements pendant la période de transition
  • transition en douceur, sans brusques sauts
  • moderne CSS (flexboxes, calc) c'est bien

Le principal problème ici est que je ne peux pas trouver un moyen de dire margin-right: -100%100% se réfère à la largeur de la barre latérale

Toute aide sera grandement appréciée!

javascript est très bien pour le déclenchement de l'effondrement de la logique. Mais je ne veux pas utiliser le javascript pour le layouting.
Que diriez - width: auto; display: flex; pour .sidebar
et que dois-je mettre dans .sidebar.collapsed?
Ce n' flexible de la largeur signifie? Comme flex: 1?
cela signifie: faut-il prendre autant de largeur que ce sont les enfants – comme si c'était display: inline-block

OriginalL'auteur Daniel | 2015-06-01