Прокрутка для KendoGrid при flexbox вёрстке

Question

Есть виджет от Кендо, но вопрос больше про вёрстку: мне надо сделать так, чтобы KendoGrid или KendoTreeList заняли бы всю область дива, в котором они расположены, но не больше экрана и была бы именно прокрутка виджета. Сейчас же у меня (когда данных много) прокручивается все окно. Как это можно исправить?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css" />
    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/jquery.min.js"></script>    
    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script> 
    <style>     
        .my-box {           
            display: flex;
            flex-flow: column;
            height: 100%;
        }
        .my-box-header {
            flex: 0 1 auto;             
            border: 1px solid red;
        }
        .my-box-content {
            flex: 1 1 auto;         
            border: 1px solid blue;     
        }
        #my-treeList {          
        }               
    </style>
</head>
<body>
    <div id="my-tabstrip">
        <ul>
            <li class="k-state-active">First</li>
        </ul>
        <div class="my-box">
            <div class="my-box-header">
                <p><b>Header</b> (sized to content)</p>
            </div>
            <div class="my-box-content">
                <div id="my-treeList"></div>            
            </div>
        </div>      
    </div>  
    
    <script>    
        let tabStrip = $("#my-tabstrip").kendoTabStrip({
            tabPosition: "left"       
        });
    
        let data = [];
        for (let i=0; i<50; i++) {
            data.push({ Name: `Item ${i + 1}` });
        }       
        let dataSource = new kendo.data.TreeListDataSource({
            data: data
        }); 
        $("#my-treeList").kendoTreeList({
            dataSource: dataSource,         
            columns: [{ field: "Name" }]
        });
    </script>
</body>
</html>

БЛОГ НА HUSL

Прокрутка для KendoGrid при flexbox вёрстке

Ответы (0 шт):