How to make flexbox, transitions and IE10 work together?

Question

I have a simple html, where I want a flex item in a table style display, to grow on hover. I also want it to transition into the grown state, for a smooth user experience.

I have made it work in Chrome. The flex grow also works in IE, but the transition does not. I have triple checked, and transitions are supported in IE10, so I am obviously doing something else wrong. I've tried researching all of the four possible attributes to transition, but everything seems to be as it should. I can't find anything in the documentation that contradicts my own setup.

Here is my own fiddle: https://jsfiddle.net/3vrp7xyo/3/ Here is the fiddle from another answer to a question here, showing the exact same issue: http://codepen.io/DrYSG/pen/ovctn (just remove the slash in the js-tab, to make it work)

UPDATE: New fiddle shows transitions working perfectly in both browsers, outside of flexbox: https://jsfiddle.net/3vrp7xyo/9/

Note that the gradient color transition actually works in both browsers, but the horizontal grow/shrink does not

Here is my code:

.day-row>div {
  line-height: 18px;
  text-align: center;
  margin: -2px -1px;
  border: 2px solid black;
  font-size: 11px;
  color: black;
}

.day-row>div:first-child {
  margin-left: -2px;
}

.day-row>div:last-child {
  margin-right: -2px;
}

.day-row {
  background-color: #CCDFE0;
  margin: -2px;
  border: 2px solid black;
  background-color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.releasecalendar-container {
  margin: 0 auto;
  padding: 25px;
  max-width: 1500px;
}

.month-column {
  padding: 0;
  margin: -2px -1px;
  border: 2px solid black;
}

.day-sunday>.weekday-name-column,
.day-sunday>.date-column {
  background-color: #F44336;
  color: white;
}

.event {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  color: white;
  font-weight: bold;
}

.event:hover {
  flex: 10;
}

.weekday-name-column,
.date-column {
  width: 22px;
}

.FZ {
  background-color: #0098c3;
}

.FZ:hover {
  color: #0098c3;
  background-color: #11caff;
}

.H {
  color: black;
  background-color: #FFF;
}

.H:hover {
  background-color: #BBB;
}

<div class="month-column">
  <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
    <div class="weekday-name-column">Fr</div>
    <div class="date-column">01</div>
    <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
    <div class="event H  1 2 3 4"><span>Event 2</span></div>
  </div>
  <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
    <div class="weekday-name-column">Sa</div>
    <div class="date-column">02</div>
    <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
    <div class="event H  1 2 3 4"><span>Event 2</span></div>
    <div class="event H  1 2 3 4"><span>Event 3</span></div>
  </div>
</div>

UPDATE: I found this page for auto-prefixing my CSS-code, but even after generating all of the possibly lacking prefixes, it did nothing to change my user interface.

Answer 1

The CSS property transition-property can't use the flexbox properties to animate. A full list of all supported properties can you see here:
https://msdn.microsoft.com/en-us/library/dn254934(v=vs.85).aspx

---

A possible solution (https://jsfiddle.net/sebastianbrosch/hq0v7zzo/):

.month-column {
  border: 2px solid black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction:column;
  margin: -2px -1px;
  padding: 0;
}
.day-row {
  background-color: #fff;
  border: 2px solid black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  margin: -2px;
}
.day-row > div {
  border: 2px solid black;
  color: black;
  font-size: 11px;
  line-height: 18px;
  margin: -2px -1px;
  text-align: center;
}
.day-row > div:first-child {
  margin-left: -2px;
}
.day-row > div:last-child {
  margin-right: -2px;
}
.weekday-name-column,
.date-column {
  width: 22px;
}
.event {
  cursor: pointer;
  flex: 1;
  flex-basis:auto;
  font-weight: bold;
  overflow: hidden;
  text-align: center;
  transition:width 2s;
  white-space: nowrap;
  width:0%;
}
.event:hover {
  width:80%;
}
.event.FZ {
  background-color: #0098c3;
}
.event.FZ:hover {
  background-color: #11caff;
  color: #0098c3;
}

<div class="month-column">
  <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
    <div class="weekday-name-column">Fr</div>
    <div class="date-column">01</div>
    <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
    <div class="event H  1 2 3 4"><span>Event 2</span></div>
  </div>
  <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
    <div class="weekday-name-column">Sa</div>
    <div class="date-column">02</div>
    <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
    <div class="event H  1 2 3 4"><span>Event 2</span></div>
    <div class="event H  1 2 3 4"><span>Event 3</span></div>
  </div>
</div>

Hint: I removed some unused / unnecessary CSS rules to get a clear overview!