css Flex justify-content space-between not work correctly in Firefox and IE

Question

I run out of an idea to fix this justify-content:space-between; in Chrome, Microsoft Edege work but in Firefox and IE not correctly layout any idea ? here is codepen preview

HTML

            <nav>
                <button class="navbar-toggle collapsed" id="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>
                <div class="setting-toggle" >
                    <div class="dropdown-toggle" id="setting-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li><a href=""><i class="fa fa-user-plus fa-fw"></i> User Page</a></li>
                        <li><a href=""><i class="fa fa-sign-out fa-fw"></i> Logout</a></li>
                    </ul>
                    <div class="cleafix"></div>
                </div>
                <div id="goto-home-page">
                    <div data-toggle="dropdown">Admin Panel</div>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="" target="_blank">Home Page</a></li> 
                    </ul>
                </div>
            </nav>

Scss syntax

    $default_nav_color : #0C0C0C;
    $default_active_color : #333;
    $default_hover_color : #298fcc;
    $default_background_color : rgba(41, 143, 204, 0.1);
    html, body {
        font:{
            family: 'Roboto', 'Open Sans';
            weight: normal;
            size: inherit;
        }
        color:#fff;
        overflow:hidden;
    }
nav{
    position:fixed;
    height:56px;
    color:#fff;
    width:100%;
    background: $default_nav_color;
    /*border-bottom:2px double #9E9E9E;*/
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 0 0 250px;
    z-index:1004;
    div{
        position:relative;
    }
    #goto-home-page{
        position:fixed;
        font-size:20px;
        border-bottom:1px ridge rgba(255, 255, 255, 0.04);
        display:flex;
        align-items:center;
        top:0;
        left:0;
        width:250px;
        height:56px;
        background:$default_active_color;
        &:hover{
            cursor:pointer;
        }

        ul{
            border-radius:0;
            margin:0;
            padding:0;
            background:$default_active_color;
            box-shadow: -1px 0 8px #fff;
            li{
                padding:15px;
            }
            li:hover{
                background: $default_background_color;
            }
            li a{
                color:#fff;
                padding:0 15px;
                &:hover, &:focus{
                    background:none;
                    color: $default_hover_color;
                }
            }
        }
        div,ul{
            width:100%;
            text-align:center;
        }
    }
}

in Chrome, Microsoft edege

|----------------|------------------------------------------------------------|
|      Admin     | Icon                                                   Icon|
|----------------|------------------------------------------------------------|

in Firefox, IE not correctly layout

|----------------|------------------------------------------------------------|
|      Admin     | Icon                    Icon                               |
|----------------|------------------------------------------------------------|