Unity3D - "Parent has a type of layout group" error

I've been haunted by this problems for over 1 year, finally got it done in a proper way.

The solution is very simple:

1. check "Control child size width/height" on the layout group component of the parent object.
2. delete content size fitter of any child object.

I will convert this to answer since I'm going to attach images. I did something similar to this for a chat feature.

1. Make the parent have the content size fitter and set either the horizontal or vertical fit to preferred size.

2. Let its immediate child be the background, and add a layout element to it to control its minimum size. Also add a layout group to it to control the text that you will put as a child to it.

3. Add the text as a child of background

4. Change the text to check the background.

[EDIT] 1. I changed the Parent's layout group to VerticalLayoutGroup. 2. I made a duplicate of the game object "Background" but with different texts to that you can see how the ContentSizeFitter and VerticalLayoutGroup controls the size of the children.

In the screenshots above, I never adjusted anything on the rect transform. I just changed the text, and as you can see, the background of each text/dialog/message also adjusted.