How to get rid of unwanted space in a Chromium Flexbox? - html

Question

I'm quite new to html 5 and css 3 but I wanted to make project page with flexbox and ran into a problem:
The site looks good in desktop mode but when it switches to the mobile view and "flex-flow: column" there is way too much space between the items as you can see in the pictures below.
Desktop version
Smartphones
The problem only occurs in chromium based browsers (Google Chrome, Vivaldi, Iron, Opera) Firefox, IE and Edge work well.
I'm not allowed to post images yet so I just put the links here.
Down there you can see my CSS code. I hope some can help me with this!
body {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
background-color: f4f4f4;
font-family: Hind, Sans-serif;
justify-content: space-between;
}
header,
nav,
nav a,
article,
aside,
footer {
border-radius: 0px 0,5em 0em;
padding: 15px;
margin: 0.5em;
flex: 1 100%;
}
header {
background: var(--color-primary);
display: flex;
flex-flow: column;
align-items: center;
}
header * {
flex: 1 1 0%;
}
header nav {
flex: 1 1 100%;
}
nav,
nav ul,
nav li {
margin: 0;
padding: 0;
border: none;
}
nav ul {
display: flex;
flex-direction: column;
}
nav li {
list-style-type: none;
margin: 1.3em 0;
flex: 1 1 100%;
}
nav a {
display: inline-block;
width: 95%;
/*background: #fffbf0;*/
border-bottom: solid 0.1em;
border-color: var(--color-primary);
margin: 0;
font-weight: bold;
text-decoration: none;
text-align: center;
color: var(--color-secondary-2);
}
#media all and (min-width: 35em) {
header {
flex-flow: row wrap;
}
nav ul {
flex-direction: row;
}
nav li {
margin: 0 0.5em;
flex: 1 1 0%;
}
Now for the essential HTML part:
<header>
<nav>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>
</nav>
</header>

Answer 1

It will work if you remove align-items: center; from the header rule
header {
background: var(--color-primary);
display: flex;
flex-flow: column;
/* align-items: center; commented out */
}
and change to flex: 1 1 0%; instead of flex: 1 1 100%; in your nav li rule
nav li {
list-style-type: none;
margin: 1.3em 0;
flex: 1 1 0%; /* change basis to 0% */
}
You also need to close your media query properly by adding its missing end bracket }