Flexbox issue on IE11

Question

I've been trying to solve this issue in the list of IE bugs, but can't seem to find it in there. It is solved by avoiding the shorthand flex-declaration on the inner element (.inner) - flex: 1; -> flex: 1 1 auto;.

Can you help me please?

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  display:flex;
  flex: 1;
  flex-direction: column;
  outline: 1px solid;
}

.inner {
  flex: 1;  
}

<div class="flex-container">
  <div class="flex-item">
    <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quidem cum quod, sed iure aspernatur enim nihil vitae eos ullam molestias possimus quia repellat, delectus, rem est quibusdam. Ipsum, perspiciatis.
    </div>
  </div>
  <div class="flex-item">
    <div class="inner">
    lorem
    </div>
  </div>
  <div class="flex-item">
    <div class="inner">
    lorem
    </div>
  </div>
  <div class="flex-item">
    <div class="inner">
    lorem
    </div>
  </div>
  </div>

Actually issue is Flex items overflowing parent in IE11

Answer 1

This issue fixed by flex: 1 0 auto instead of flex: 1