下拉菜单与 flexbox 内的容器重叠

Question

我正在开发我的个人网站。父 header 被放置在一个 flexbox 中：

HTML：

<header class="main">
  <div class="content">
    <div class="logo">
      <a href="#"><img src="image.png" alt="" /></a>
    </div>
    <div class="navigation">
      <nav class="main-nav">
        <ul>
          <li><a href="#">Menu 1</a>
            <ul>
              <li><a href="#">Sub-Menu 1</a></li>
              <li><a href="#">Sub-Menu 2</a></li>
            </ul>
          </li>
          <li><a href="#">Menu 2</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

CSS：

header { display: -webkit-flex; display: flex; justify-content: center; overflow: auto;
         height: 20vh; width: 100%; align-items: flex-end; z-index: 999; }

header .content { width: 50vw; height: auto; position: relative;
                  display: -webkit-inline-flex; display: inline-flex;
                  justify-content: space-between; overflow: auto; align-items: flex-end; }

这会将徽标和导航放置在父元素的底部，在header .content div 中这些元素的左侧和右侧。

但是我的下拉菜单项与容器重叠，导致标题中出现垂直滚动条。

我不想在导航和徽标上使用position: absolute; 而不是 flexbox，因为这样它们可以水平重叠。为小宽度屏幕编写一个导航隐藏器可以解决这个问题，但我认为 flexbox 是一个更好的解决方案。

完整的下拉菜单 css 请访问 JSfiddle：https://jsfiddle.net/Lanti/s4Lqqyyp/15/

有没有办法将 flexbox 用作父级并隐藏下拉菜单项？

.main-nav ul ul { visibility: hidden; opacity: 0; position: absolute; }

感谢您的帮助！

更新：

https://jsfiddle.net/Lanti/s4Lqqyyp/18/

添加.container { display: -webkit-flex; display: flex; flex-direction: column; } 并从header .content 中删除position: relative; 似乎解决了这个问题。

Answer 1

由于您使用的是 flexbox，请删除 flex div 的宽度/高度值（如 height: 20vh）并改用 flex property。示例：flex: 0 0 auto。另一个常见的 flex 属性是 flex direction 用于设置容器内的 div 方向（列或行）。有时flex wrap 也是必要的。看看这三个属性，我相信你会摆脱这些不受欢迎的卷轴。

三个对对齐很重要的 flex 属性：Align items 垂直对齐。 Justify content 水平对齐。 Align content 用于容器内多行上的项目。

html, body {
  height: 100vh;  
  margin: 0;
}

#container { 
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column; /* Safari 6.1+ */
  flex-direction: column;
  height: 100%;
}

#A {
  -webkit-flex: 0 0 20%;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  height: 20%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row; /* Safari 6.1+ */
  flex-direction: row;
  -webkit-align-items: flex-end; /* Safari 7.0+ */
  align-items: flex-end;
  -webkit-justify-content: center;
  justify-content: center;
}

#B {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 0 60%;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  height: 60%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-flex-wrap: nowrap; /* Safari 6.1+ */
  flex-wrap: nowrap;
  -webkit-flex-direction: row; /* Safari 6.1+ */
  flex-direction: row;
}

#C {
  -webkit-flex: 0 0 20%;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row; /* Safari 6.1+ */
  flex-direction: row;
  -webkit-align-items: flex-start; /* Safari 7.0+ */
  align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
}

#header {
 -webkit-flex: 0 0 80%;
 -ms-flex: 0 0 80%;
 flex: 0 0 80%;
 text-align: center;
 height: 80%;
}

#footer {
 -webkit-flex: 0 0 80%;
 -ms-flex: 0 0 80%;
 flex: 0 0 80%;
 text-align: center;
}

#B img {  
  height: 100%; 
}

#logo {
  height: calc(100% - 10px);
  max-height: 100%;
  margin-top: 5px;
  margin-bottom: 5px;  
}

span {
  font-family: arial, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
}

#header span {  
  vertical-align: super;
}

<div id="container">
<div id=A style="background-color:hotpink;">
<div id=header style="background-color:honeydew;"><span>MENU 1 - MENU 2</span><img src="http://lantosistvan.com/wp-content/uploads/2014/02/lantosistvan-logo-100px-003.png" alt="Lantos István Photography" id=logo /><span>MENU 3 - MENU 4</span></div>
</div>
  
<div id=B style="background-color:honeydew;">  
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0001-1400px.jpg" alt="">    
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0002-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0003-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0004-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0006-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0007-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0008-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0009-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0011-1400px.jpg" alt="">
<img src="http://lantosistvan.com/wp-content/uploads/2014/06/20140516-eskuvo-barbi-balazs-0012-1400px.jpg" alt="">
</div>
  
<div id=C style="background-color:hotpink;">
<div id=footer style="background-color:honeydew;"><span>FOOTER</span></div>  
</div>
</div>