CODEWITHSUNDEEP
htmlcssflexboxinternet-explorer-11
Rob Gwynn-Jones
Rob Gwynn-Jones

Reputation: 687

IE11 Flex Container Overflows When Inside Table

Check out the below code sample in IE11 and Google Chrome.

In Chrome, it displays as I expect it to, but in IE11 the table expands to be far wider than the containing block. This seems to be caused by the display: flex - removing the display, flex-direction, and justify-content styles makes everything pop back into place.

I would like IE11 to display my content the same way that Google Chrome does. I would strongly prefer not needing to change the markup if at all possible.

I've come across a number of other questions that deal with IE-related flexbox bugs, and they all recommend changing various flex properties, but nothing I've tried has changed the effect. Setting a max-width on div.flex * DOES work, but I'd rather keep this dynamic if possible.

<html>

<body>
  <style>
    div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
  </style>
  <div class="wrapper">
    <div class="flex">
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
    </div>
    <table class="wrapper-table">
      <tbody>
        <tr>
          <td>
            <div class="flex">
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Upvotes: 0

Views: 131

Answers (1)

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

You said that "removing the display, flex-direction, and justify-content styles make everything pop back into place."

If it is possible for you to identify the IE browser and apply the specific style then you could refer to this example.

<html>

<body>
  <style>
@supports not (-ms-high-contrast: none) {
    div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
}

  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
     
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
}
  </style>
  <div class="wrapper">
    <div class="flex">
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
    </div>
    <table class="wrapper-table">
      <tbody>
        <tr>
          <td>
            <div class="flex">
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Output:

enter image description here

In this way, you do not need to make any changes in the markup and you will get similar output in the IE browser.

Further, you can modify the code as per your own requirements.

Upvotes: 1

Related Questions