By design igGrid has fixedHeaders option which is set to true. This means that headers will be fixed and only the grid data will be scrollable. In order to limit parent and child grid my suggestion is to set height option for both of them. In this scenario when the container`s height exceeds the value set in height option a scrollbar will appear.  When this happens and user scrolls the header will remain visible and only the grid data will be scrolled.

I created a small sample illustrating my suggestion for your reference. In my igHierarchicalGrid initialization I am setting height for both parent and layout. For example:

$("#hierarchicalGrid").igHierarchicalGrid({
                width: "100%",
    height: "400px",
                autoGenerateColumns: false,
                dataSource: northwind,
                responseDataKey: "results",
                dataSourceType: "json",
                features: [
     {
      name: "Sorting",
                        inherit: true
                    },
                    {
      name: "Paging",
                        pageSize: 5,
                        type: "local",
                        inherit: true
                    }
                ],
                columns: [
                   { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
                   { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
                   { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
                   { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
                   { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
                   { key: "City", headerText: "City", dataType: "string", width: "15%" }
                ],
                autoGenerateLayouts: false,
                columnLayouts: [
                    {
                        key: "Orders",
                        responseDataKey: "results",
                        width: "800px",
      height: "200px",
                        autoGenerateColumns: false,
                        primaryKey: "OrderID",
                        columns: [
                            { key: "OrderID", headerText: "Order ID", dataType: "number", width: "20%" },
                            { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
                            { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
                            { key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" },
                            { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "20%" },
                            { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
                        ]
                    }
                ]
            });

Please have a look at my sample and let mw know whether it helps you achieve your requirement, If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me.

I hope you find my information helpful.

"How do I get"  :)  Thanks.

My grid layers have no scroll bars, so maybe it does this automatically.  Not sure how to limit grid layers so they produce a scroll bar.

Thanks!