Seems ScrollablePanel works strange in this example.

[adover134]

I tried the following example panel code.

import { ScrollablePanel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';

const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;

var data = {
    name: 'Rex',
    card: [
        { name: 'A' },
    ],
    image: [
        { name: 'A' },
    ],

};

export class InfoZone extends ScrollablePanel {
    constructor (scene, x, y, width, height) {
        let config = get_config(scene, data, x, y, width, height);

        super (scene, config);

        this.getElement('scroller')
            .on('dragstart', function () {
                console.log('scroller.dragstart')
            })
            .on('dragend', function () {
                console.log('scroller.dragend')
            });
    }
}

var get_config = function (scene, data, x, y, width, height) {   
    // var Panel = createPanel(scene, data); // ver B

    return {
        x: x+width/2,
        y: y+height/2,
        width: width,
        height: height,

        scrollMode: 0,

        background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 10, COLOR_PRIMARY),

        panel: {
            child: createPanel(scene, data).Panel, // ver A
            //child: Panel.Panel, // ver B

            mask: {
                padding: 1,
            },
        },
  
        mouseWheelScroller: {
            focus: false,
            speed: 0.1
        },

        space: {
            left: 10,
            right: 10,
            top: 10,
            bottom: 10,

            panel: 10,
        }
    };
}

var createPanel = function (scene, data) {
    var [Card, card] = createCard(scene, data, 'card');
    return {Panel: scene.rexUI.add.sizer({
        orientation: 'y',
        space: { item: 10 }
    })
        .add(
            Card, // child
            { expand: true }
        ), card: card};
}

var createCard = function (scene, data, key) {
    var title = scene.rexUI.add.label({
        orientation: 'y',
        text: scene.add.text(0, 0, 'Card'),
    });

    var image = scene.add.container(0, 0, [
        scene.rexUI.add.roundRectangle(0, 0, 210, 280, 5, COLOR_LIGHT)
    ]).setSize(210, 280);

    var header = scene.rexUI.add.label({
        orientation: 'y',
      
        icon: image,
      
        text: scene.add.text(0, 0, data.name),

        space: { icon: 10 },

        name: key
    });

    return [scene.rexUI.add.sizer({
        orientation: 'y',
        space: { left: 5, right: 5, top: 5, bottom: 5, item: 10 }
    })
        .addBackground(
            scene.rexUI.add.roundRectangle(0, 0, 0, 0, 0, undefined).setStrokeStyle(2, COLOR_LIGHT, 1)
        )
        .add(
            title, // child
            { expand: true, align: 'center' }
        )
        .add(header, // child
            { proportion: 1, expand: true }
        ), image];
};

The one with current state works well.
However, when I used the codes in annotation notated as 'ver B' and removed the codes notated as 'ver A', then it is not working.
It seems the problem is on the Scrollable Panel, because the same method which returning the multiple variables works well with sizer as you can see in the example.

I was trying this to make a panel which will show the info of right-clicked object on the field.

[adover134]

Ok, I found how can I solve the problem.
If you want to make a container/game object inside of scrollable panel, you should give the container/game object to the child where it should be, which is defined before generating the config.

What I tried was

1. Defined a container when generating a sizer.
2. Returned the container with the sizer when generating the panel.
3. Then tried to generate a scrollable panel with generated panel.

Step 1 and step 2 were worked, but step 3 was not.

The solution was

1. Define a container before generate a config.
2. Give the defined container to sizer which includes the child sizer - until the container reaches the sizer which should be in.

That's it!
The container inside of the panel is same one which we defined in the step 1.
So, we can access to the container with the variable which we defined in the step 1.

[adover134]

Following is an example code which editted from the original question.

export class InfoZone extends ScrollablePanel {
    constructor (scene, x, y, width, height) {
        // The game object which I wanted to track.
        let Card =  new CardImage(scene, 0, 0, 0, 210, 280);
        let config = get_config(scene, data, x, y, width, height, Card);

        super (scene, config);

        // Now we can access as this.
        this.Card = Card;
        this.Card.setOrigin(1);
        this.Card.setTexture('cards', 2);

        this.getElement('scroller')
            .on('dragstart', function () {
                console.log('scroller.dragstart')
            })
            .on('dragend', function () {
                console.log('scroller.dragend')
            });
    }
}

var get_config = function (scene, data, x, y, width, height, Card) {

    return {
        x: x+width/2,
        y: y+height/2,
        width: width,
        height: height,

        scrollMode: 0,

        background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 10, COLOR_PRIMARY),

        panel: {
            child: createPanel(scene, data, Card),

            mask: {
                padding: 1,
            },
        },
  
        mouseWheelScroller: {
            focus: false,
            speed: 0.1
        },

        space: {
            left: 10,
            right: 10,
            top: 10,
            bottom: 10,

            panel: 10,
        }
    };
}

var createPanel = function (scene, data, Card) {
    var Card = createCard(scene, data, 'card', Card);
    return scene.rexUI.add.sizer({
        orientation: 'y',
        space: { item: 10 }
    })
        .add(
            Card,
            { expand: true }
        );
}

var createCard = function (scene, data, key, Card) {
    var title = scene.rexUI.add.label({
        orientation: 'y',
        text: scene.add.text(0, 0, 'Card'),
    });

    var image = scene.add.container(0, 0, [
        Card
    ]).setSize(210, 280);

    var header = scene.rexUI.add.label({
        orientation: 'y',
      
        icon: image,
      
        text: scene.add.text(0, 0, data.name),

        space: { icon: 10 },

        name: key
    });

    return scene.rexUI.add.sizer({
        orientation: 'y',
        space: { left: 5, right: 5, top: 5, bottom: 5, item: 10 }
    })
        .addBackground(
            scene.rexUI.add.roundRectangle(0, 0, 0, 0, 0, undefined).setStrokeStyle(2, COLOR_LIGHT, 1)
        )
        .add(
            title,
            { expand: true, align: 'center' }
        )
        .add(header,
            { proportion: 1, expand: true }
        );
};

The 'CardImage' is my custom class which exports the Phaser.GameObjects.Image - so you can just use Image instead or change with any game object you want.