Wrapping text with does not update container height

Question

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

Answer 1

Just as an added note, this issue didn't appear until Windows 8.1. Prior to 8.1 (and the new WinJS.Repeater), the message list was a custom control that does basically the same thing as the new Repeater control. I've tested the old custom control with the app on 8.1 and the result is the same as the WinJS.Repeater, so I guess something changed in the rendering engine maybe.