Выпадающее меню, перекрывающее его контейнер внутри flexbox

Question

Я работаю над своим личным сайтом. Родитель заголовок помещается в 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; } 

Это поместит логотип и СЧА на дне родителя, слева и правая сторона этих элементов в div header .content.

Однако мои пункты меню выпадающего меню перекрывают контейнер, вызывая вертикальную полосу прокрутки в заголовке.

Я не хочу использовать position: absolute; на nav и логотип вместо flexbox, потому что таким образом они могут пересекаться друг с другом по горизонтали. Написание навигатора для небольших экранов ширины позволит решить эту проблему, но я думаю, что flexbox - гораздо более приятное решение.

Для полного выпадающего меню CSS, пожалуйста, посетите JSfiddle: https://jsfiddle.net/Lanti/s4Lqqyyp/15/

Есть ли способ использовать Flexbox в качестве родителя и пунктов меню, имеющих раскрывающихся скрытого с этим?

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

Благодарим за помощь!

Update:

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

Добавление и удаление .container { display: -webkit-flex; display: flex; flex-direction: column; }position: relative; из header .content кажется, фиксируется вопрос.

Answer 1

С тех пор как вы работаете с flexbox, удалите значения ширины/высоты div div div (например, height: 20vh) и вместо этого используйте flex property. Пример: flex: 0 0 auto. Другим общим свойством flex является flex direction, используемый для установки направления divs (столбец или строка) внутри контейнера. Иногда также требуется flex wrap. Взгляните на эти 3 свойства, и я уверен, что вы избавитесь от этих нежелательных свитков.

Три свойства гибкости, которые необходимо выровнять: 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>