display flex creating extra space why

Question

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

Answer 1

By default, flex organizes elements in rows, from left to right. In your case, that means that the two elements inside <li class="menu-item-has-children"> (the link and the sub-menu) will be positioned side by side.

You have to add flex-direction: column to fix your issue:

* {
  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
}

.menu {
  display: flex;
}

.menu li {
  flex: 1;
}

.menu li a {
  display: block;
}

ul ul li {
  display: flex;
  flex-direction: column; /* <- specify the flex direction here */
}

<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>

The fact that your sub-menu appears to be outside your flex container is caused by the min-width: 100% setting on your .menu li a elements.