0

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>

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
3
  • Thanks, that seems to work nicely. I'll keep the question open for a little while to see if anyone else has insight - I'd love to know why this particular bug seems to happen. If not though, this solution works fine for my needs, thanks for taking the time to answer!
    – Rob Gwynn-Jones
    Commented May 26, 2020 at 23:44
  • If you think that the above suggestion can be helpful in solving the issue then I suggest you accept it as an answer to this question. It can help other community members in the future. Thanks for your understanding.
    – Deepak-MSFT
    Commented May 27, 2020 at 6:14
  • Hi Deepak - it's good practice to wait a day before accepting an answer so I wanted to give it at least that long. If no other answers have come in though, I will be accepting this answer as correct :)
    – Rob Gwynn-Jones
    Commented May 27, 2020 at 6:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.