I have a WinJS.Repeater whose template generates -ms-grid elements for a text message conversation view. I want the message text to wrap and break words when necessary. However, when I enable the wrapping styles as follows:
.wrap-text {
white-space: normal;
word-wrap: break-word;
}
The height of the whole message div does not increase as the text div increases due to the wrapping. Below are some screenshots illustrating the point.
Without text wrapping, the layout is fine:

But as soon as I turn the wrap-text class on, the message elements overlap because the height didn't adjust for wrapped text:

You can see where the dark blue message extends underneath the next one when the text wraps. Does anyone have any solution or suggestion as to how this can be fixed?
Thanks,
Taylor