Flexbox changes size after reload - html

Question

I'm trying to create simple page header with a logo on the left-hand side and links divided evenly on the right-hand side. Like this render from Adobe Xd presenting expected header design. To do this I have written this code (snippet is missing the image and is a bit too narrow for this margin):
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>
Działalność
Jednostki
Dokumenty
Kontakt
</nav>
</header>
This solution works as expected in certain cases on Chrome and Opera. The layout is correct after the first load of page (screenshot from Chrome after the first page load). It also scales adequately to viewport resizing. Then, after clicking some links, <nav> become narrower and flex is not flexible anymore - doesn't change size when viewport does (screenshot from Chrome after the bug occures).
On Firefox and Edge this solution doesn't work at all - bug occurs all the time.
You can test this page here. Even more confusing is fact that the footer (made with flexbox) works propoerly on the same page. How can I repair my code to make header looks as expected?

Answer 1

You are working with a static margin. Its better to use a relative CSS rule to achieve the space between content and borders. Also you dont need to set flex-grow & flex-basis.
But the main issue was that the img { height: 100% } caused that the img element rise to its full height. You have to give the header .logo a max-height attribute.
Also its better to achieve the space between the nav elements with padding.
Here is a possible solution:
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>
Działalność
Jednostki
Dokumenty
Kontakt
</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>
Działalność
Jednostki
Dokumenty
Kontakt
</nav>
</header>