Search code examples
csshtml-tableflexboxinternet-explorer-10

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.

Solution

  • 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>