Html 如何使我的剑道树视图div可滚动且不扩展

这是一个样本

行内容不可滚动，应跟随窗口边缘。


html{字体大小：14px；字体系列：Arial、Helvetica、sans serif；}
树景
标题



（根据内容调整大小）

{{dataItem.text}}选择
所选：{selectedItem.text}
在下面添加项目
添加子项
删除
angular.module（“KendoDemos”[“kendo.directives”]）
.controller（“MyCtrl”，函数（$scope）{
$scope.treeData=新的kendo.data.HierarchycalDataSource（{data:[
{案文：“项目1”}，
{文本：“项目2”，扩展：真，项目：[
{案文：“分项2.1”}，
{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{案文：“分项2.2”}，{“}，{text:“2.2分项”}，{text:“2.2分项”}，{text:“2.2分项”}，{text:“2.2分项”}，{text:“2.2分项”}，{text:“2.2分项”}，{text:“2.2分项”}，{text:“2.2分项”}，{text:“2.2分项”}，{text:“2.2.2分项”}，{text:“2.2分项”}，{“第2.2分项”}
] },
{案文：“项目3”}
]});
$scope.click=函数（数据项）{
警报（dataItem.text）；
};
函数makeItem（）{
var txt=kendo.toString（新日期（），“HH:mm:ss”）；
返回{text:txt}；
};
$scope.addAfter=函数（项）{
var数组=item.parent（）；
var index=array.indexOf（项目）；
var newItem=makeItem（）；
数组.拼接（索引+1,0，新项）；
};
$scope.adddown=函数（）{
//仅通过修改数据源无法实现此功能
//因此，我们改用tree.append。
var newItem=makeItem（）；
$scope.tree.append（newItem，$scope.tree.select（））；
};
$scope.remove=功能（项）{
var数组=item.parent（）；
var index=array.indexOf（项目）；
阵列拼接（索引1）；
$scope.selectedItem=未定义；
};
})
html，正文{
身高：100%；
保证金：0
}
.盒子{
显示器：flex；
柔性流动：柱；
身高：100%；
}
.包厢{
边框：1px点灰色；
}
.box.row.header{
flex:01自动；
/*以上简称为：
flex-grow:0，
弹性收缩：1，
弹性基础：自动
*/
}
#示例{高度：100%；}
#示例{高度：100%；}
.盒子{
最大高度：100vh！重要；
}
.box.row.content{
flex:1自动；
溢出y：滚动！重要；
}
我确实已经在
.box.row.content{flex:11 auto；overflow-y:scroll}
Hi！你能看看我的最新帖子吗？我附上了一个屏幕截图。我不知道这是我的浏览器还是什么，因为它似乎在你这边工作。我在Chrome、Firefox和Edge中进行了测试。结果相同。我想我没能弄清楚。我想我错过了一些需要指定的内容。我需要在子分区中进行滚动，而不是在父分区中。嗨！如果我使用此代码，滚动bar将被删除。请检查我的演示以进行测试。干杯！很高兴帮助您：），如果有帮助，您可以将此答案标记为True，但仍然无法解决问题。我在Chrome、Firefox和Edge中进行了测试。请确保我的css覆盖此选项“overflow-y:scroll”或者将其替换为溢出：自动！重要的；在这篇文章中，我用你的建议代替了它。还是一样。