CODEWITHSUNDEEP
csshtml-tableflexboxinternet-explorer-10
Laurianti
Laurianti

Reputation: 975

Bug in Internet Explorer 10 with flexbox in table

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.

Upvotes: 0

Views: 1675

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105903

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>

Upvotes: 1

Siderite Zackwehdex
Siderite Zackwehdex

Reputation: 6570

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?

Upvotes: 1

Margeaux Spring
Margeaux Spring

Reputation: 76

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

Upvotes: 0

Related Questions