Scroll View with dynamic sized content

I know, there are some other posts about this, but they're not helping.

I'm trying to make an emulated Chat client, with a graphic style similar to the current Whatsapp. The messages are inside a colored box, for each of the partecipants.

I have a Scroll View, for the chat. Inside I will populate it with prefabs of the conversation pieces: one for the player, one for the other guy. the text is loaded dynamically (I'm using a TextMesh Pro).
I'd like that the background image for the conversation piece would change according to the length of the text, but I'm struggling.

In the Conversation prefab, beside the text, there's also the avatar of the Chatting guy.

This the situation in the scene:

ScrollView.......................
-- Content.......................[VerticalLayoutGroup][ContentSizeFitter]
-- -- Backgrond Image....[ContentSizeFitter] (?)
-- -- -- Text.Mesh pro......
-- -- -- Avatar...................

If I put a ContentSizeFitter in the Background Image, I see no changes when the text size exceeds the boundaries. (see image: https://imgur.com/a/QQit74S)

If I put a Vertical/horizontal/Grid Layout to the Background Image I can make it work, but the avatar becomes unmanageable, since it get aligned with the text by the layout.

How can I solve this? Thanks for the help ^^

 

ContentSizeFitter only works when placed on a GameObject that also has a LayoutGroup component, so adding a Horizontal or Vertical LayoitGroup is probably the way to go. See the docs for more info.

For the user's icon, add a LayoutElement to that GaneObject the and tick the checkbox for "Ignore Layout", this will stop the parent LayoutGroup from moving/resizing it.

Hope that helps!