Chrome and Opera refuse to go from flex: 0 to flex: 1

Chrome and Opera absolutely refuse to animate the transition between flex: 0 and flex: 1, which works great in Firefox. Also, some Safari users report that they work, but with my Safari, it can't even change slides. Plus it doesn't work with IE at all.

Is the whole idea inherently flawed or is it a browser issue?

HTML:                  

  <input type="radio" name="radio-btn" id="inb" />
  <figure class='b'>
  </figure>

  <input type="radio" name="radio-btn" id="inc" />
  <figure class='c'>
  </figure>

      

        
        
        
      

    

CSS (most of them are actually prefixes):

main {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  flex-direction: -webkit-column;
  flex-direction: -moz-column;
  flex-direction: -o-column;
  flex-direction: column;
  min-width: 100%;
  min-height: 100%;
}

input {
  position: fixed;
  left: 50%;
}

#ina {
  top: 40%;
}

#inb {
  top: 50%;
}

#inc {
  top: 60%;
}

figure {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  flex-direction: -webkit-row;
  flex-direction: -moz-row;
  flex-direction: -o-row;
  flex-direction: row;
  width: 100%;
  height: 100%;
  -webkit-flex: 0;
  -moz-flex: 0;
  -o-flex: 0;
  flex: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.a {
  background: CornflowerBlue;
}

.b {
  background: tomato;
}

.c {
  background: DarkKhaki;
}

#ina:checked + .a {
  -webkit-flex: 1;
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
}

#inb:checked + .b {
  -webkit-flex: 1;
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
}

#inc:checked + .c {
  -webkit-flex: 1;
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
}

      

        
        
        
      

    

Encoder link: http://codepen.io/budgieweb/pen/jPwpXE