Auto-position nested UserControls

Question

I want to autosize some generated controls. I create two TextBox types and two CustomControl types which are a type of UserControl. Each CustomControl has a Label that displays a string which I call a caption. I can only see one of the two textboxes. I can only see one of the two captions. How can I display all the Controls in the Form? I prefer not to manage control position's myself. Rather stick to Dock settings.

 public partial class SomeForm : Form
{
    public SomeForm()
    {
        InitializeComponent();
        LoadControls();//I can only see the first control caption and textBox2
        //how can I display both textboxes and both captions?
    }

    private void LoadControls()
    {
        TextBox textBox = GenerateTextBox("First textbox");
        TextBox textBox2 = GenerateTextBox("Second textbox");

        CustomControl control = new CustomControl(labelCaption: "First control caption");
        CustomControl control2 = new CustomControl(labelCaption: "second control caption");            

        //add the textboxes to the usercontrols
        control.Controls.Add(textBox);
        control2.Controls.Add(textBox2);            

        //this displays only 1 control (incorrect)
        flowLayoutPanel1.Controls.Add(control);
        flowLayoutPanel1.Controls.Add(control2);
        flowLayoutPanel1.SetFlowBreak(control, true);
        flowLayoutPanel1.SetFlowBreak(control2, true);

        //this displays both controls (correct)
        //flowLayoutPanel1.Controls.Add(textBox);
        //flowLayoutPanel1.Controls.Add(textBox2);
        //flowLayoutPanel1.SetFlowBreak(textBox, true);
        //flowLayoutPanel1.SetFlowBreak(textBox2, true);
    }

    private static TextBox GenerateTextBox(string text)
    {
        TextBox textBox = new TextBox();
        textBox.Text = text;
        textBox.Dock = DockStyle.Top;
        return textBox;
    }
}

CustomControl:

    public CustomControl(string labelCaption)
    {
        InitializeComponent();
        Label label = new Label();
        label.Text = "Rtb..." + labelCaption;
        //label.Dock = DockStyle.Top;
        //contentPanel.Controls.Add(label);//disabled for now
    }

Answer 1

The problem is your initialization using DockStyle.Top:

        CustomControl control = new CustomControl(labelCaption: "First control caption");
        control.Dock = DockStyle.Top;        
        CustomControl control2 = new CustomControl(labelCaption: "second control caption");            
        control2.Dock = DockStyle.Top;

They're going to overlay each other this way. Instead of using DockStyle, use positioning attributes:

       control.Top = 0;
       control2.Top = control.Height;

That should get you where you need to go.

A great way to learn about how to do this well is to look at the code the designer generates. Do this by hand in the designer, then look at the generated code, and it will help you generalize how to do the positioning in code yourself in the future.

Edit based on your comment:

You can use a FlowLayoutPanel and set a FlowBreak after each:

flowLayoutPanel.Controls.Add(control);
flowLayoutPanel.Controls.Add(control2);
flowLayoutPanel.SetFlowBreak(control, true);
flowLayoutPanel.SetFlowBreak(control2, true);