1

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701

1 Answers1

0

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

Ram kumar
  • 3,152
  • 6
  • 32
  • 49