display flex creating extra space why

My understanding of flexbox, is that if you display a element as flex, that item become flex container and it direct children will become flex items and these flex items behave as inline block items, so i am following this logic, and it was working fine, untill i added the last in my css, please read the comment i left the comment in my css code, which line is confusing me.

in short i was expecting similiar outcome, but i am confuse about the space, please see the image to understand as well,

HTML CODE

<ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="menu-item-has-children"><a href="#">Services</a>
                <ul class="sub-menu">
                    <li><a href="#">Plumbing</a></li>
                    <li class="menu-item-has-children"><a href="#">Heating</a>
                        <ul class="sub-menu">
                            <li><a href="#">Residential</a></li>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Industrial</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Electrical</a></li>
                </ul>
            </li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact Us</a></li>

        </ul>

CSS CODE

/*basic style no need to pay attention*/
*{font-family:helvetica;
    margin:0px;padding:0;
    list-style-type:none;
}
ul{margin:5px;}
ul ul a:link{color:red;}
ul ul ul a:link{color:black}
/*displaying them as flex, work fine*/
.menu{display:flex;}
.menu li {flex:1;}

.menu li a {
    display:block;
    min-width:100%
}

/*this line is confusing to me*/
ul ul li{
    display:flex;
}

First image

Second image