Выпадают элементы из флекс-контейнера

287

17 октября 2017, 01:56

При правке чужой верстки вылез непонятный механизм в шапке сайта - всё на флексах, внутри контейнера-центровищика три элемента (один с маленьким логотипом, второй - пункты меню, третий - вход в личный кабинет). За счет auto-маргинов слева и справа у пунктов меню, лого и "вход прижимаются к краям. В сами пункты по-середине разведены фиксированными маргинами и при попытке перевести их на %-ые происходит следующее, - кнопка входа может при определенном сжатии просто наезжать на пункты меню, как будто их и нет, т.к. контейнер игнорирует всё, хотя всё должно сжиматься и места там еще хватает. Картинки с иллюстрацией изменений:

.menu-container { 
  display: flex; 
} 
 
ul.header-menu.header-menu-center { 
  margin: auto; 
} 
 
ul { 
  list-style: none; 
} 
 
a { 
  text-decoration: none; 
  color: inherit; 
} 
 
.header-menu-right { 
width: auto !important; 
margin: 0px !important; 
} 
 
nav a { 
  display: block; 
} 
 
header nav a { 
  padding: 7px; 
} 
 
header.document-header, 
.document-footer { 
  background-color: #262626; 
  color: #fff; 
  width: 100%; 
  overflow: hidden; 
} 
 
.header-nav ul.header-menu { 
  display: flex; 
  align-items: center; 
} 
 
.header-menu-center li { 
  margin: 0px 70px; 
} 
 
img.nav-band { 
  width: 45px; 
} 
 
.header-nav { 
  display: flex; 
  align-items: center; 
  justify-content: flex-start; 
  padding: 2px 20px; 
}

<header class="document-header"> 
  <nav class="header-nav"> 
    <div class="site-band"> 
      <img class="nav-band" src="img/logo.png"> 
      <button class="toggle-menu btn"></button> 
    </div> 
    <div class="menu-container"> 
      <ul class="header-menu header-menu-center"> 
        <li> 
          <a class="active-link" href="/">Главная</a> 
        </li> 
        <li> 
          <a class="" href="/company">Компания</a> 
        </li> 
        <li> 
          <a class="" href="/shop">Магазин</a> 
        </li> 
        <li> 
          <a class="" href="/necropolis">Некрополь</a> 
        </li> 
      </ul> 
      <ul class="header-menu header-menu-right"> 
        <li> 
          <a href="/login">Вход</a> 
        </li> 
      </ul> 
      <div class="header-menu-second" data-menu-item="company"> 
        <ul> 
          <li></li> 
        </ul> 
      </div> 
    </div> 
  </nav> 
</header>