ContentPane doesn't scroll when nested inside other ContentPanes

I am using a Dojo Dialog that contains a TabContainer which has a ContentPane that contains both an image and a nested ContentPane with text. I would like the nested ContentPane to scroll, but I don't want its parent container with the image to scroll.

<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {width: '100%', height: '600px'}">
            <div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction', style:  {overflow: 'hidden'}">
                <img id="projectImage" src="../images/island.png" />
                <div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0}">
                    about this project
                </div>
            </div>

The content of "divDialogMessage" is added dynamically. This gives me the following dialog

enter image description here

If I change the style of divContainer to

                <div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction', style:  {overflow: 'auto'}">

then I get what I don't want, which has the parent ContentPane with both image and text scrolling.

enter image description here

What's the correct syntax to only have the text ContentPane scroll?

Solution

You would need to explicitly give your inner ContentPane a height via CSS too, otherwise there's nothing constraining it to need to handle overflow in the first place.

Example with minimal modification to your code:

<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {width: '100%', height: '600px'}">
            <div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction'">
                <img id="projectImage" src="../images/island.png" />
                <div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0, height: '500px'}">
                    about this project
                </div>
            </div>
        </div>
    </div>
</div>

Unrelated:

Avoid using data-dojo-id since it creates global variables. Assign an id then use dijit/registry.byId to retrieve widgets when necessary.
Whenever possible, prefer actual stylesheets to inline styles.