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

Я работаю над своим личным сайтом. Родительский заголовок помещается в flexbox:

HTML:

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; на nav и логотип вместо 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; } .container { display: -webkit-flex; display: flex; flex-direction: column; } .container { display: -webkit-flex; display: flex; flex-direction: column; } и удаление position: relative; из header .content похоже, исправлена ​​проблема.

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

Три свойства гибкости, необходимые для выравнивания: выравнивание элементов по вертикали. Оправьте содержимое горизонтальным выравниванием. Совместите содержимое элементов на нескольких линиях внутри контейнера.

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