Why does jsTree exceed the size of the outer div

I don't know why this is happening； I want the entire tree to be displayed within a div. this is my code :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
        <style>
            .treeDiv {
                height: 300px;
                background-color: coral;
                width: 300px;
                verflow:auto;
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <div class="treeDiv">
            <div id="jstree">
            </div>
        </div>
        <script>
            $(function() {
                $('#jstree').jstree({
                    "core": {
                        "multiple": false,
                        "data": {
                            "url": "./node.json"
                        }
                    }
                });
            });
        </script>
    </body>
</html>

vakata / jstree

Why does jsTree exceed the size of the outer div #2793