[SOLVED] Vertical layout with text elements of uneven height

I have a dialogue system that's already working. It's easy to write and is full of options, to interact with the player.
I was asked to change the way in wich is display on screen to something like the on in the image below.
Please notice the in that system you can always scroll upwards to see the log of the conversation.
My thought was to use a vertical layout and have "dialogue elements" with an image to the side in wich I can change the background and portrait, and at the other side have the actual text where I can load the speeches. As you can imagine, I need this dialogue elments to change in size depending of it's content, more text = bigger element. One can use Vertical overflow to make the text dermine the size of the element's rect. Problem is that that the father (holding the picture at the side) won't change along.
I've made a mess that kind of works, with sublayouts, content size fitters and what not. Still I don't have the level of control I want. I've look trhough the docs, and there's a page refered to this problem, but the solution is written in a very succint way and I can't make heads or tails out of it. Wasn't able to replicate the result they seem to get ( here's the manual link, maybe some of you can tell me how to make it work: https://docs.unity3d.com/Manual/HOWTO-UIFitContentSize.html).
I have to say, I really hate this layouts of Unity. Between this an the anchor points, everything breaks all the time, and I kind of lost track of what I'm doing. The web is full of hacks for this, but I couldn't find one good enough for the kind of flexibility that I need.
Maybe some of you could help me find the way.

 

Oh, wow.
There is indeed a solution described in the docs.
It is relatively simple:

1. In the parent object add a Vertical (or Horizontal) Layout Group
2. Add also a content size fitter to the parent object and set the vertical fit to "Preferred Size"
3. Create a Text-Object beneath the parent. Make sure that there is only this text component as a child

That works for me.
If I knew that before I wouldn't have built a custom solution...

 

This solution doesn't work for me, cause, in adition to the text, I also have to place the image of the guy speaking that should go at the side, plus the buttons for the options.
The docs shear a solution for when you have many elements aside from text, but is very short and unclear to me. If you have any idea, I'll be more than happy to welcome it.

 

Hopefully this can clarify a bit what the problem is:
First you can see the empty window, and then the container with the dialogue elements and the vertical layout.
As you can see, the first element has a text that goes beyond, but the parent size is not changed, and either is the vertical layout configuration.




Here is the arrange I'm using.
Having a content fitter, the object with the text is scalling it's rect transform to the propper size, but the parent element does not, and it doesn't allow a content fitter since it's size is beign drive by the vertical layout.
The docs give this particular case, but the solution provided is not working for me.

 

Ok, I got it to work. I used pretty much the same set up, but did a hack, using the object with the text component as the parent element. I thought I've tried it but seems something was wrong. Now is working.
If anyone is interested here is how my parent element now looks in the inspector.
I removed the mask so that you can get to see how a dummy conversation would look like.
The content size fitter throws a warning, but I think is trying to catch something different.





Now, I have to find out what to do with the buttons, but I think I can make it work.