Flexbox меняет размер после перезагрузки

Question

Я пытаюсь создать простой заголовок страницы с логотипом слева и равномерно разделенными ссылками справа. Как этот рендер от Adobe Xd с ожидаемым дизайном заголовка . Для этого я написал этот код (фрагмент не содержит изображение и слишком узок для этого поля):

header {
  margin: 0 200px;
  height: 75px;
  border-bottom: #707070 solid 2px;
  display: flex;
  flex-direction: row;
}

header .logo {
  flex-grow: 2;
  flex-basis: 0;
  padding: 5px 0;
}

header nav {
  flex-grow: 1;
  flex-basis: 0;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

header nav a {
  align-self: flex-end;
}

<header>
  <div class="logo">
    <a href="home.html">
      <img alt="Logo Hufca" src="logo_hufca_zlote.svg" />
    </a>
  </div>
  <nav>
    <a href="active.html">Działalność</a>
    <a href="unit.html">Jednostki</a>
    <a href="docs.html">Dokumenty</a>
    <a href="contact.html">Kontakt</a>
  </nav>
</header>

Это решение работает, как и ожидалось, в некоторых случаях в Chrome и Opera. Верная верстка после первой загрузки страницы (скриншот из Chrome после первой загрузки страницы) . Он также масштабируется для изменения размера области просмотра. Затем, после нажатия на некоторые ссылки, <nav> становится уже, а flex больше не является гибким - не меняет размер, когда viewport делает (скриншот из Chrome после ошибки) . В Firefox и Edge это решение вообще не работает - ошибка возникает постоянно. Вы можете проверить эту страницу здесь. Еще более запутанным является тот факт, что нижний колонтитул (сделанный с flexbox) работает на одной и той же странице. Как я могу восстановить свой код, чтобы заголовок выглядел так, как ожидалось?

Answer 1

Вы работаете со статическим margin. Лучше использовать относительное правило CSS для достижения пространства между контентом и границами. Также вам не нужно устанавливать flex-grow & flex-basis.

Но главная проблема заключалась в том, что img { height: 100% } вызвал подъем элемента img на полную высоту. Вы должны задать атрибут header .logo a max-height. Также лучше достичь расстояния между элементами навигации с помощью отступов.

Вот возможное решение:

header {
  margin: 0 auto;
  max-width: 90%;
  height: 75px;
  border-bottom: #707070 solid 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

header .logo {
  padding: 5px 0;
  height: 100%;
  max-height: 65px;
}

img {
   height: 100%;
}

header nav {
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

header nav a {
  align-self: flex-end;
  padding-right: 10px;
}

header nav a:last-child {
  padding-right: 0;
}

<header>
  <div class="logo">
    <a href="home.html">
      <img alt="Logo Hufca" src="https://wip.733mdh.pl/user/themes/motyw-hufca/images/logo_hufca_zlote.svg">
    </a>
  </div>
  <nav>
    <a href="active.html">Działalność</a>
    <a href="unit.html">Jednostki</a>
    <a href="docs.html">Dokumenty</a>
    <a href="contact.html">Kontakt</a>
  </nav>
</header>

Answer 2

header {
  height: 75px;
  border-bottom: #707070 solid 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

header .logo {
  flex-grow: 2;
  flex-basis: auto;
  padding: 5px 0;
}

header nav {
  flex-grow: 1;
  flex-basis: auto;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

header nav a {
  align-self: flex-end;
}

<header>
  <div class="logo">
    <a href="home.html">
      <img alt="Logo Hufca" src="https://picsum.photos/200/50" />
    </a>
  </div>
  <nav>
    <a href="active.html">Działalność</a>
    <a href="unit.html">Jednostki</a>
    <a href="docs.html">Dokumenty</a>
    <a href="contact.html">Kontakt</a>
  </nav>
</header>