高度为100%的子元素(ul元素)溢出其父元素

这是我的Less文件,我在其中具有“ second_header” ID的标头,其高度为50像素。 我将其高度设置为100%的所有Child都可以正常工作,但是右导航栏和左导航栏中的UL元素溢出了其父项,我真的不知道其原因。 如果您能在这种情况下帮助我,我将不胜感激。

这是我的html代码:

              <div id="second_header">
                 <div class="container">

                  <!-----right nav ----->
                  <nav id="second_header_rightNav">
                      <ul>
                          <li><a href="#">test</a> </li>
                          <li><a href="#">test</a> </li>
                          <li><a href="#">test</a> </li>
                          <li><a href="#">test</a> </li>
                          <li><a href="#">test</a> </li>
                      </ul>
                  </nav>

                  <!-----left nav----->
                  <nav id="second_header_leftNav">
                      <ul>
                          <li><a href="#">test</a> </li>
                          <li><a href="#">test</a> </li>
                      </ul>
                  </nav>

              </div>
          </div>

这是我较少的代码:

#second_header{
   background-color: @second_header;
   height: 50px;
   .container{
      display: flex;
      justify-content: space-between;
      height: 100%;
     /*---------inside the first header---------- */
      #second_header_rightNav{
        flex: 3;
        height: 100%;
        ul{
          height: 100%;
        }
      }
      #second_header_leftNav{
        flex: 1;
        height: 100%;
        ul{
          height: 100%;
        }
      }
      /*---------inside the first header---------- */
    }
  }
评论