The height after flex calculation is under Sogou 7.0. isn't the height of the child element calculated according to the parent element?

Please enter the code Sogou 7.0browser (chrome/45) is inconsistent with chrome63 (2 scroll bars appear under windows). After checking, it is found that the internal two div (- sharpdiv1,-sharpdiv2) heights are not calculated based on .bottom height, so there are some questions here. Will the height calculated by flex cause the calculation problem of child elements in some browsers?


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    
    .container {
        width: 100%;
        height: 100%;
        display: flex;
    }
    
    .menu {
        width: 50px;
        height: 100%;
        background-color: -sharp000111;
        flex-shrink: 0;
    }
    
    .body {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .top {
        width: 100%;
        height: 100px;
        background-color: -sharpfff111;
        flex-shrink: 0;
    }
    
    .bottom {
        width: 100%;
        height: 100%;
        flex: 1;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="menu"></div>
        <div class="body">
            <div class="top"></div>
            <div class="bottom">
                <div id="div1" style="width: 100%;height: 100%;overflow: auto;">
                    <div id="div2" style="width: 100%;height: 120%;"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>