How to size buttons inside a layout group to their child text?

I’ve been using this page as a reference Redirect to... title of new-page

If you have a button with text that overflows it, the reference page tells you to put a layout group and a content size fitter on it, which makes the button grow to fit the text. This works fine.

I have a vertical layout group, with buttons inside it. The above solution doesn’t work because, as the reference points out, you can’t put a content size fitter on a GameObject that is a child of a layout group. In this case, the reference says to disable the Child Force Expand toggles on the parent layout group, and on the child layout groups (if applicable). This doesn’t work for me, the buttons don’t resize to fit their text.

It also says “Once the children no longer expand with flexible width, their alignment can be specified in the Layout Group using the Child Alignment setting.” That’s fine, but I’m concerned with size, not alignment.

So, how do I do this?

So I figured this out, it was because I was doing this inside of a ScrollView which had its own stuff going on. Anyway here is the configuration to make a vertical scrolling list of buttons that can grow vertically as their content grows.

Content (child of Viewport) has a Vertical Layout Group component and a Content Size Fitter component. The Content Size Fitter has its Vertical Fit set to Preferred Size.

Each Button under Content has a Vertical Layout Group component.

That’s it. I personally added a LayoutElement to each button and set its minimum height, just to avoid having really small buttons when there wasn’t a lot of text. This also worked fine.

Here is how it works:

     - Vertical layout group > untick everything except child control size height
     - content size fitter > vertical size = preferred size

now for the children of content
      - parent item 1 (Add Vertical layout group with only Child control size ticked, don't add layout element)
               - child item 1 (add layout element, for flexible height remove tick from all the checkboxes)

And you're done

This sort of works for me, but when my buttons have extra lines of text, the buttons above now get pushed upwards and move off screen. Any idea what I could be doing wrong? Granted, I could fix that manually but I would rather have an automatic solution (it’s complicated).

Edit: I figured it out. Had to set the pivot of the Vertical Layout to 1 in Y. Now it scales as expected.