How to use Content Size Fitter

I'm having some trouble understanding how to make LayoutElements adjust to their content. Can someone help point out my mistake?

I have a RectTransform—the background of a label. The background has a child with the label's Text. I've added a LayoutElement component to them both, and a Content Size Fitter to the parent. The Content Size Fitter has a preferred width of 50 and is constrained horizontally to the preferred width. The child text's RectTransform has a width of 200, so I would assume that the Content Size Fitter would force the parent to also have a width of 200. Instead, the parent changes width to whatever the preferred width is on its own LayoutElement, no matter what size its child is.

How can I get the parent RectTransform to know / adjust to the size of the child's width?

 

Content Size Fitter changes the rect width based on _this_ gameobject's min/preferred width. To change the preferred width of a gameobject based on child gameobjects' preferred width, you have to use Horizontal Layout Group on the parent together with Content Size Fitter.

 

Thanks Melang. That did the trick!