Html ContentPane没有'；嵌套在其他内容窗格中时不滚动

我使用的是一个Dojo对话框，其中包含一个TabContainer，它有一个ContentPane，该ContentPane包含一个图像和一个带有文本的嵌套ContentPane。我希望嵌套的ContentPane滚动，但我不希望其包含图像的父容器滚动

<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>

关于这个项目

动态添加“divDialogMessage”的内容。这给了我以下对话框

如果我将divContainer的样式更改为

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

然后我得到了我不想要的东西，它的父内容窗格同时具有图像和文本滚动

---

只有文本ContentPane滚动的正确语法是什么？

您也需要通过CSS显式地为内部ContentPane指定一个高度，否则没有什么约束它首先需要处理溢出

对代码进行最小修改的示例：

<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>

关于这个项目

无关的：

• 避免使用

  数据dojo id

  ，因为它会创建全局变量。分配一个

  id

  ，然后在必要时使用

  dijit/registry.byId

  检索小部件
• 尽可能地选择实际样式表而不是内联样式

---

您需要将ContentPane的高度设置为您希望文本占据的大小

<div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0, height: '150px'}">
 lots of text goes here to make overflow...
</div>

大量的文字在这里溢出。。。

以下是一个工作示例：