Dynamically generated FlowLayoutPanel, has different output - winforms

Question

I'm trying to dynamically generate 2 FlowLayoutPanels with a couple of buttons.
private void DrawButtons() {
tlpButtons.Controls.Clear();
foreach (var type in Globals.ThisAddIn.TicketTypes.OrderBy(x => x.Name)) {
tlpButtons.Controls.Add(new Label() { Text = type.Name, Dock = DockStyle.Fill });
var container = new FlowLayoutPanel() { Dock = DockStyle.Fill, AutoSize = true, AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowOnly, BackColor = Color.Yellow, FlowDirection = FlowDirection.LeftToRight };
foreach (var skill in Globals.ThisAddIn.Skills.OrderBy(x => x.Name)) {
container.Controls.Add(new Button() { Text = skill.Name });
MessageBox.Show(tlpButtons.RowCount.ToString());
}
tlpButtons.Controls.Add(container);
}
}
This is what it outputs:
Let me explain what you're seeing.
I have TableLayoutPanel tlpOuter (pink) with 1 column (100%) and 2 rows. Row 1: AutoSize, Row 2: 100%
In the first row I have another TableLayoutPanel tplButtons (orange) with 1 column (100%) and 1 row (AutoSize, GrowStyle: Rows)
Now I can't figure out why the 2nd FlowLayoutPanel (yellow) is so large. It shouldn't be. It is exactly the same as the first panel (it's in a foreach) and yet, it adds all this whitespace (yellowspace).
What I found, when debugging line-by-line, is that the second panel grows as the buttons are added (as if it thinks they get a new line instead being placed side-side if it can) while it does not do that while adding the buttons to the first panel.
UPDATE:
So I removed the docking from the flowLayoutPanels and I can now see the problem is actually the TableLayoutPanel tlpButtons!
From what I can gather, it is sizing the Table as if the controls inside had no docking. Look:
So the question remains, why does this TableLayoutPanel not account for the docking of the FLP's?