Flexbugs: Flexbox IE 11 overflow issue

[kirillNevedrov]

Have not found any known issue for that.

Following example works fine in chrome, firefox and edge, but in IE 11 div with class "second" overflows parent.

http://codepen.io/anon/pen/kXmoYY

html:

<div class="first">
  <div class="second">
    <div class="third">
        1
    </div>
    <div class="third">
        2
    </div>
  </div>
  <div class="second">
    <div class="third">
        3 text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </div>
    <div class="third">
        4 text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </div>
  </div>
</div>

less:

.first{
  display: flex;
  flex-direction: row;  
  width: 500px;

  .second{     
    flex: 0 1 auto;   
    display: flex;
    flex-direction: column;       

    .third {     
      flex: 1 1 auto; 
      padding: 10px;
    }
  }
}

See screenshot below:

[philipwalton]

This is an issue I've encountered a lot with nested flexbox containers in IE10-11, unfortunately I haven't been able to generalize it enough to include in the main list.

The problem is generally text not wrapping when using flex-basis: auto.

In your case, a one-off solution is to not use auto for the flex items that you expect might wrap:
http://codepen.io/anon/pen/QEPAbP

[kirillNevedrov]

Thank you, but if i want first column to wrap text as well, then it will always take 50% of container. One more possible solution is to set min-width: 0% on element with class 'second', but then browser can shrink elements too much. So i think there is no work around without side effects for that issue.

[jacobclarke92]

This has been driving me crazy.
I know this is an old post but I've found a weird fix where if you put overflow: hidden on .second it behaves as expected. overflow: auto works too but sometimes add scrollbars..
Obviously not ideal say if you want to translate position of elements within a .third but it's something!
Hope this helps someone.

[bsotodo]

I also had this issue. To solve it I gave the container a fixed (no %) width and align-items: stretch

[philipwalton]

@sotocodes which container are you referring to? .first, .second, or .third in the above example?

[bsotodo]

...to `.first´ (the container that is overflowed by its content) @philipwalton

[philipwalton]

@sotocodes Can you make a demo showing that? It doesn't work for me. And btw, in this example both .first and .second are containers with overflowing content.

[bsotodo]

Just add a fixed width to .second.

• Example: https://codepen.io/sotocodes/pen/aVgdEq?editors=1100
• Code (_I add also some color and margin so you can see it works_):

.first{
  display: flex;
  flex-direction: row;  
  width: 500px;
  background-color: darkgray;

  .second{     
    flex: 0 1 auto;   
    display: flex;   
    flex-direction: column;       
    width: 500px;
    background-color: gray;
    margin: 30px;

    .third {     
      flex: 1 1 auto; 
      padding: 10px;
      margin: 4px;
      background-color: snow;
    }
  }
}

[jmerner]

Using stretch in IE instead of flex-start solved the issue for me.

@media all and (-ms-high-contrast:none) {
    .second {
      align-items: stretch;
    }
}

[rekna1]

I maybe have a case that is related to this bug. The sample is somewhat more complicated with more nested flexboxes. https://jsbin.com/deticuzuvi/1/edit?html,css,output

As you can see content of div.docs will overflow even if wrap is specified when screen is small enough.
All elemens of div.docs will remain on one line while they should wrap onto the next line.
I fixed it by wrapping the contents of div.docs with a div.iewrap-fix:

.iewrap-fix { flex:1 1 100%; display:flex; flex-flow:row wrap; }
One can optionally remove wrap on div.docs as well.
(just uncomment div.iewrap-fix to see the corrected result in IE)

Don't know if this fix is general enough to work in other cases as well.

Added jsbin with fixed result here: https://jsbin.com/foromukuna/1/edit?html,css,output

[jtuds]

Just had this issue. An element inside it's flex container was breaking out of the container and not wrapping. I found that removing align-items: center; fixed the issue but I needed the items to be centered. So I found that adding align-self: stretch; to the child element/element that was breaking out fixed it.

[magicknight]

I maybe have a case that is related to this bug. The sample is somewhat more complicated with more nested flexboxes. https://jsbin.com/deticuzuvi/1/edit?html,css,output

As you can see content of div.docs will overflow even if wrap is specified when screen is small enough.
All elemens of div.docs will remain on one line while they should wrap onto the next line.
I fixed it by wrapping the contents of div.docs with a div.iewrap-fix:

.iewrap-fix { flex:1 1 100%; display:flex; flex-flow:row wrap; }
One can optionally remove wrap on div.docs as well.
(just uncomment div.iewrap-fix to see the corrected result in IE)

Don't know if this fix is general enough to work in other cases as well.

Added jsbin with fixed result here: https://jsbin.com/foromukuna/1/edit?html,css,output

Thanks, this works for me

[DaveDev13]

Hi, check this.
You just need to use flex: 1; for the element that should take up more space

[heekei]

I think the default value of flex-box's overflow is visible in IE;

[MiguelMike]

Hi, check this.
You just need to use flex: 1; for the element that should take up more space

I had to set flex: 1; on all elements in flex container to spread them equally and wrap texts in them. Otherwise each element had 100% width of the container.

That was the only change required to make it work.

[srodrigo]

Hi, check this.
You just need to use flex: 1; for the element that should take up more space

I'm not sure why you got down votes. This works.

[henrijs]

Had to go this route .third > * { max-width: 100%; }