title: Flexbox in Safari: Grow and shrink
body: <p>I am trying to make a cross-browser flexbox layout, to display cards positioned alongside one another. They should be left- or right-aligned (determined by "left" and "right" classes) when there is enough space for all cards, but shrink when there isn't. When shrinking, mouseover a card would make it shrink less, so that more of it can be viewed.</p>
  
  <p>So much talk about this, <a href="http://jsfiddle.net/GdKvG/" rel="noreferrer">live demo here</a> if you prefer.</p>
  
  <p>CSS:</p>
  
  <pre><code>img{
     width:90px;
      position: absolute;
  }
  
  .cards{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
      -webkit-justify-content: flex-start;
      -ms-flex-direction: row;
      -ms-justify-content: flex-start;
      flex-direction: row;
      justify-content: flex-start;
  }
  .cards.right{
      float: right;
      -webkit-flex-direction: row-reverse;
      -webkit-justify-content: flex-end;
      -ms-flex-direction: row-reverse;
      -ms-justify-content: flex-end;
      flex-direction: row-reverse;
      justify-content: flex-end;
  }
  
  .cards div{
      position:relative;
      -webkit-flex: 0 2 90px;
      -ms-flex: 0 2 90px;
      flex: 0 2 90px;
      -webkit-box-flex: 0 2 90px;
      transition: flex-shrink .3s;
      transition: flex-shrink .3s, -webkit-flex .3s;
      -webkit-transition: -webkit-flex .3s;
  }
  .cards.left div:last-child, .cards.right div:first-child{
      -webkit-flex: 0 0 90px;
      -ms-flex: 0 0 90px;
      flex: 0 0 90px;
      -webkit-box-flex: 0 0 90px;
  }
  .cards.left div:not(:last-child):hover, .cards.right div:hover+div{
      -webkit-flex: 0 1 90px;
      -ms-flex: 0 1 90px;
      flex: 0 1 90px;
      -webkit-box-flex: 0 1 90px;
  }
  </code></pre>
  
  <p>So far I have successfully created the desired layout in lastest versions of IE, FF, Chorme and Opera.<br>
  However, I am running into problems with Safari. They layout depends on being able to specify different flexibilities for grow and shrink, but as far as I can tell, Safari does not support this.</p>
  
  <p>Any help on growing and shrinking flexboxes in Safari is appreciated. I don't want to fallback to my old table-based layout as it tends to break in IE and FF.</p>