Add child with dynamic height for scrollablePanel

[ngodinhdai286]

` createTable = (scene: Phaser.Scene, popupW: number) => { const rows = this.missionLists.length const table = this.rexUI.add.gridSizer({ row: rows, column: 1, rowProportions: 1, columnProportions: 1, space: { column: 30, row: 30 }, })

let item: IMission, rowIndex: number, colIndex: number
for (let i = 0; i < this.missionLists.length; i++) {
  item = this.missionLists[i]
  rowIndex = i;
  colIndex = 0;
  table.add(
    this.createIcon(scene, item, popupW),
    colIndex,
    rowIndex,
    "center",
    0,
    false
  )
}
return table

}

createIcon = (scene: Phaser.Scene, item: IMission, width: number) => { const padding = 20 const container = scene.add.container()

const background = this.add.nineslice(0, 0, 'ui', 'ui/bg_input.png', width, 0, 30, 30, 10, 10)
container.add(background)
const icon = this.add.sprite(0, 0, 'ui', `ui/${item.thumb}`)
icon.x = -background.width / 2 + icon.width / 2 + 30
const title = this.add.text(0, 0, item.title, {
  "color": "#085CA7",
  "fontSize": "24px",
  fontStyle: 'bold',
  wordWrap: { width: width * 0.8 }
});
title.x = icon.x + 20 + icon.width / 2
title.y = - title.height / 2

const desc = scene.add.text(0, 0, item.description, {
  "color": "#085CA7",
  "fontSize": "24px",
  fontStyle: 'bold',
  wordWrap: { width: width - icon.width - padding * 2 }
})

const height = padding + title.height + padding + desc.height
console.log("height", height);

desc.x = icon.x + 20 + icon.width / 2
background.height = height
icon.y = -background.height / 2 + icon.height
title.y = icon.y
desc.y = title.y + title.height / 2 + padding
container.setSize(background.width, background.height)

return container

} `

I create a scrollablePanel and the code above I use to create child for scrollPanel

But I have an issue: the container I return when I create icon have a dynamic height and therefore the child of scrollablePanel do not present correctly Please help me