1

Text overflows parent containers on internet explorer.

enter image description here

Where the Text begins 'This is my second Harry Potter...' the line refuses to break and wrap and it just zooms of the right edge of the screen in IE. I suspect IE has difficulty with it's parent being display: flex.

I've tried putting the text in it's own but it doesn't help. Can't believe people are still using IE, but loads are in my analytics.

<span style="background-color: #583D27; margin-top: 1em; padding: 8px;">

<div style="display:flex; border: 2px solid lightgray; background: white; border-radius: 10px; padding: 16px; line-height: 1.6em; font-size: 1em;">
    <div width="70px" height="70px">
    <div style="border-radius: 50%;
    width: 50px;
    height: 50px;

    text-align: center;
    padding-top: 10px;
    background: #C21C5E;
    line-height: 100%;
    font-size: 28px; color: white; font-weight: 400;">
  A</div>
</div>

<div style="display: inline-block; margin-left: 16px; float: right;  letter-spacing: 1px; font-size: 0.95em; width: 100%">
  <div style="width: 100%; font-size: 1.1em; font-weight: ">Angela Bowen</div>
  <div style="width: 100%; font-size: 0.95em; line-height: 0.95em; color: gray">10 reviews</div>

  <div style="color: unset; border: none !important; width: 100%; margin-top: 1.2em; font-size: 0.8em; letter-spacing: 3px;">⭐⭐⭐⭐⭐</div>
      This is my second Harry Potter tour in Edinburgh and Sam's blew the other one out of the water, I will be bragging to everyone back home about it and definitely going again <span style="font-weight: unset; color: unset; background-color: unset; border: unset; background: unset; border: none !important"></span>
  </div>

</div>
<figcaption style="background-color: #583D27; padding: 8px 8px 4px 8px; color: white;"><!-- Mudbloods unite! -->This was a wonderful surprise, <a href="https://goo.gl/maps/HUWfjwBMyJq">my first review</a> from someone who has been on both tours & I'm very grateful for it.</figcaption>
</span>
Sam
  • 1,659
  • 4
  • 23
  • 42
  • Your code as-is wraps as expected in my W10 IE11 dev.tools v11 mode (v11.836.18362.0IC update: 11.0.190). In v10 mode it has a right margin problem, but wraps also. Also, you might want to remove your smirk at IE as there are plenty of people in 2nd and 3rd world countries that cannot afford high-end PC equipment that run modern browsers. You are being unnecessarily rude... – Rene van der Lende May 16 '20 at 15:26
  • Which IE is that ? the text wraps down to IE 5 – Rainbow May 16 '20 at 17:38
  • Thanks for the heads up Rene on the third world, you are quite right. @ZohirSalak IE11. For the present I've put a max-width on it. But this is a very cludgy solution, falling apart at lower viewport widths. – Sam May 16 '20 at 18:32
  • I try to test your code with the IE 11 browser and this is the test result I get in the IE browser. https://imgur.com/a/8PzCAdw You can see that it is working. As the stand-alone sample is working fine. It can possible that some other CSS code caused this issue in your actual site. I suggest you can have a check and if the issue persists then please try to provide more information about your code. It may help to narrow down the issue. – Deepak-MSFT May 18 '20 at 01:48

0 Answers0