Dropdown menu overlapping it's container inside flexbox

问题

I'm working on my personal site. The parent header is placed in a 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; }

This will place the logo and the nav on the bottom of the parent, at the left and right side of these elements in the header .content div.

However my dropdown menu items overlapping the container, causing a vertical scrollbar in the header.

I don't want to use position: absolute; on the nav and logo instead of flexbox, because that way they can overlap each other horizontally. Writing a nav hider for little width screens will solve this, but I think flexbox is a much nicer solution.

For the full dropdown menu css please visit the JSfiddle: https://jsfiddle.net/Lanti/s4Lqqyyp/15/

Is there any way to use flexbox as a parent and having dropdown menu items hidden with this?

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

Thank You for your help!

Update:

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

Adding .container { display: -webkit-flex; display: flex; flex-direction: column; } and removing position: relative; from header .content seems like fixed the issue.

回答1:

Since youre working with flexbox, remove the flex divs width/height values (like height: 20vh) and use the flex property instead. Example: flex: 0 0 auto. Another common flex property is the flex direction used to set the divs direction (column or row) inside a container. Sometimes flex wrap is also necessary. Take a look in these 3 properties and I'm sure you'll get rid of these undesired scrolls.

Three flex properties important to align: Align items to vertical align. Justify content to horizontal align. Align content for items on multi-lines inside a container.

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>

来源：https://stackoverflow.com/questions/35773346/dropdown-menu-overlapping-its-container-inside-flexbox

标签

html

css

drop-down-menu

flexbox