Safari flexbox text wrapping issue - css

Question

I've discovered an issue with Safari (OS X):
https://codepen.io/alexlouden/pen/jONyZKb
document
.querySelectorAll('.parent')
.forEach(el => {
el.addEventListener("mouseover", event => {
event.target.style.color = 'blue';
})
})
* {
box-sizing: border-box;
}
.parent {
display: flex;
align-items: center;
justify-content: center;
width: 280px;
padding: 32px;
background-color: #e99;
margin: 32px;
text-align: center;
}
.child {
flex: 1;
max-width: 100%;
background-color: #99e;
}
.grandchild {
overflow-wrap: break-word;
border: 1px dotted black;
}
<div>
In Safari, when you hover on the red area the XXXs will stop wrapping. <br/>
Hover over the blue area and it will fix and re-wrap.
</div>
<div class="parent">
<div class="child">
<div class="grandchild">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
</div>
</div>
<div class="parent">
<div class="child">
<div class="grandchild">
Centered
</div>
</div>
</div>
The grandchild seems to not be respecting the max-width constraint of the child, but only when the style of the parent is modified - not when it's first loaded.
I'm wondering what's causing this behaviour, and whether this is already a known issue with Safari or if I should report the bug?

Answer 1

I guess answer is much simpler then I thought ':D !!
Just change the following css and it should work B)
.parent {
display: flex;
align-items: center;
justify-content: center;
width: 280px;
padding: 32px;
background-color: #e99;
margin: 32px;
text-align: center;
overflow-wrap: break-word;
}