Text overflows beyond div occasionally in Chrome 43 - html

Question

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.
<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 ?

Answer 1

It looks like your info-icon might be the culprit here.
either
a) Set the icon to position:absolute and the container to position:relative, which will take the icon out of the flow, so it won't push the text to the right,
or
b)
maybe use the icon as a background-image. Simply increase the padding-left of the container and add it as a background-image. I find this to be the easiest way to keep things in order, whilst still flexible and responsive:
https://jsfiddle.net/svArtist/s3xc3nro/
.mt-landing__section-notification {
z-index: 1;
width: 64.5%;
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%;
}
.icon-info{
background: url(http://www.grafik-wunder.de/klafo/images/info.png) #411E4E no-repeat 10px center;
padding-left: 50px;
min-height: 50px;
box-sizing:border-box;
}
<div class="mt-landing__section-notification icon-info">
<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>