Kendo Splitter面板无垂直滚动条：如何添加左右独立滚动条？

问题原因 #

1. 高度约束断裂：父组件垂直Splitter的第二个面板禁用滚动后，没有给子组件的Splitter传递明确的高度限制。height:100%依赖父元素有确定高度才能生效，否则面板会被内容撑开，不会触发溢出滚动。
2. 手动样式干扰：直接给左侧面板加height:100%!important和overflow-y:scroll!important时，因为父级高度没限制，面板高度等于内容高度，自然没有溢出，所以出现空滚动条。
3. Kendo Splitter默认逻辑：Splitter面板默认只有在面板有明确高度/宽度，且内容超出这个尺寸时，才会自动显示滚动条。嵌套场景下父级高度传递失效，子面板无法计算溢出。

解决方案 #

1. 修复父级Splitter的高度传递 #

父组件（entry.component.html）的垂直Splitter第二个面板，即使禁用自身滚动，也要确保它占满可用高度，让子组件能继承高度：

<!-- entry.component.html -->
<kendo-splitter orientation="vertical" style="height: 100vh;">
  <kendo-splitter-pane>
    <!-- 顶部面板内容 -->
  </kendo-splitter-pane>
  <kendo-splitter-pane [scrollable]="false" class="child-host-pane">
    <app-details></app-details>
  </kendo-splitter-pane>
</kendo-splitter>

添加对应CSS：

.child-host-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}

2. 子组件Splitter使用内置滚动配置 #

子组件（details.component.html）的Splitter不需要手动写overflow样式，直接用组件的scrollable属性，同时确保子Splitter占满父面板高度：

<!-- details.component.html -->
<kendo-splitter orientation="horizontal" class="details-splitter">
  <kendo-splitter-pane [scrollable]="true">
    <!-- 左侧表单内容 -->
  </kendo-splitter-pane>
  <kendo-splitter-pane [scrollable]="true">
    <!-- 右侧内容 -->
  </kendo-splitter-pane>
</kendo-splitter>

添加CSS：

.details-splitter {
  flex: 1;
  height: 100%;
}

3. 移除无效的手动样式 #

删掉之前给左侧面板加的height:100%!important和overflow-y:scroll!important，这些样式会破坏Kendo Splitter的内置布局逻辑，改用组件自带的滚动配置即可。

4. 确认完整高度链 #

确保从最外层到子Splitter的每一层都有高度约束：

• 最外层容器（比如entry组件的根div）设置height:100%
• 父Splitter设置明确高度（比如100vh或100%）
• 父Splitter的第二个面板通过flex布局占满可用高度
• 子Splitter继承父面板的高度

这样左右面板会在内容超出面板高度时自动显示垂直滚动条。

内容的提问来源于stack exchange，提问作者IonicMan