Text overflows beyond div occasionally in Chrome 43

I have a basic block(purple) that has some text inside it of variable length. The div is position relative and is also responsive so its width etc is in %.

Some of our users on Chrome latest (v43.0.2357.65) and WinXP see the text overflows to the edge of the purple box. This happens on a whim so its hard to reproduce. I am trying to fix the CSS so that text does not overflow. I have a max-width and break-word property too on the div that contains the text.

The site is in dutch.

screenshot of text overflowing

<div class="mt-landing__section-notification">
<div class="mt-landing__section-notification__info-icon icon-info"></div>
                <div class="mt-landing__section-notification__close-icon"></div>
                <div class="mt-landing__section-notification__content">
                    <div class="mt-landing__section-notification__message">
                        This is where the text is. 
                    </div>
                </div>
            </div>

And here is the CSS on the outermost div and the one containing the text :

.mt-landing__section-notification {
    z-index: 1;
    width: 64.5%;
    background-color: #411E4E;
    padding: 20px;
    color: #fff;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 0px;
    display: block;
}
 .mt-landing__section-notification__message {
     line-height: 24px;
     margin-top: -3px;
     word-wrap: break-word;
     max-width: 100%;
}
 .mt-landing__section-notification__content {
     margin: 0px 50px; 
  }
  .mt-landing__section-notification__info-icon {
       width: 50px;
       float: left;
       font-size: 24px;
  }
  .info-icon {
      font-family: mt-icons;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
   }
   .info-icon::before {
        content: 'e617';
    }

Any ideas why text is overflowing ?


Source: cross-browser

Leave a Reply