0

In Internet Explorer 10 I have a problem with flexbox in this situation:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
    </head>
    <body>
        <div style="width: 500px; background-color: grey;">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <div style="display: flex; display: -ms-flexbox;">
                                <span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus dui, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

The "text very long" exceed from the grey div. In other browser it works. Also in Internet Explorer 11. Now I inserted meta to set Internet Explorer 10 compatibility.

UPDATE: I updated the code with your corrections, but it yet doesn't works in my situation.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Laurianti
  • 903
  • 1
  • 5
  • 19
  • Possible duplicate of [Flexbox code working on all browsers except Safari. Why?](http://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why) – Heretic Monkey Mar 16 '16 at 20:58
  • 1
    add display:inline-block to the span and close it as it should be . and see http://caniuse.com/#search=flex if you have not yet – G-Cyrillus Mar 16 '16 at 21:12
  • I closed it, and added display: inline-block to the span, but yet doesn't work. I use normally flexbox in Internet Explorer 10, but in this situation I have this problem. – Laurianti Mar 16 '16 at 21:38
  • update from your table wrapping the flex container. table-layout and width should be set as well : http://codepen.io/anon/pen/oxBeoz else it keeps expanding ... – G-Cyrillus Mar 17 '16 at 13:37

3 Answers3

1

looks like max-width or width is needed too. http://codepen.io/anon/pen/wGgWWW

DISCLAIMER: only tested via the devellopper tools and not a real IE10

.a{
  display: flex; 
  width:50%;
  background:red;
}
span {
  display:inline-block;
  max-width:100%;
}
​        <div style="width: 50%; background-color: grey;">
            <div class="a" >
                <span >Text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long very long text very long text very long text very long text very long text very long text very long</span>
            </div>
        </div>

EDIT from code edited in question. A table is wrapping the flex container. Table expands according to content, if table-layout:fixed; is set with a width, the flex container should stands within and child should wrap inline content. http://codepen.io/anon/pen/oxBeoz

table {
  table-layout:fixed;
  width:100%;
}
<div style="width: 500px; background-color: grey;">
  <table>
    <tbody>
      <tr>
        <td>
          <div style="display: flex; display: -ms-flexbox;">
            <span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus duploplopoloppl i, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • I updated the code with the REAL situation. With display: inline-block and max-width: 100% works but except in my situation. – Laurianti Mar 17 '16 at 09:18
  • 1
    @Laurianti updated answer with your full new test case, **again via codepen and emulation of IE 10 (in edge)** http://codepen.io/anon/pen/oxBeoz i added some style for table. – G-Cyrillus Mar 17 '16 at 13:35
  • 1
    Ohh, my friend. I can confirm it works also with Internet Explorer 10 as well as Internet Explorer 11 with IE10 emulation. – Laurianti Mar 17 '16 at 13:43
1

Well, since the same code works in Chrome and not in IE, it seems that there indeed is a bug. I could fix your code on IE by using px instead of % for the second div, also by removing the table. Somehow the interaction of table and percentage is causing a bug.

For me it is clear that the problem is in the way width is computed. What does 50% mean? It is half the width of the offset parent, but the offset parent is the table division, which computes its width based on its contents. You get a circular reference. Change the width of the div to a static px value and you break the circle.

Either way, what is the point of using a flexbox inside a table?

Siderite Zackwehdex
  • 6,293
  • 3
  • 30
  • 46
  • And the problem persists though i remove the div with width: 50%, I will update my example – Laurianti Mar 17 '16 at 10:31
  • I'm working in SharePoint (Microsoft). In "Edit Page Mode" it adds tables around my webparts which contains my html code. I have summarized the problem to show you. – Laurianti Mar 17 '16 at 10:38
  • I found an answer that might point us in the right direction: http://stackoverflow.com/questions/33578003/flexbox-centering-and-overflow-bug-in-ie10#answer-33578198 but I couldn't make it work – Siderite Zackwehdex Mar 17 '16 at 10:46
  • Also this: http://stackoverflow.com/questions/17156444/flexbox-layout-does-not-work-in-internet-explorer-10#answer-17156937 The simple answer seems to be that a different flex set of specifications is implemented in IE. Can't you set the width of the second div with Javascript? – Siderite Zackwehdex Mar 17 '16 at 10:50
  • I have already fixed the problem with a workaround, but I would understand how fix as correctly as possible in next future. – Laurianti Mar 17 '16 at 10:52
  • I've tried random things and none worked. I think you should just accept that it is not yet feasible to use flex in IE, yet. I went to a tutorial page (http://www.sketchingwithcss.com/samplechapter/cheatsheet.html) for Flex and half of the examples just didn't work in IE. – Siderite Zackwehdex Mar 17 '16 at 10:57
0

It looks like you forgot to close your <span></span> tag. I would start there. I have a working pen that works for IE10 http://codepen.io/cheapwebmonkey/pen/eZgzLP

Margeaux Spring
  • 76
  • 1
  • 5