Navigation mit Flexbox zu breit für Smartphones.

[fbube]

Hallo liebe Leute,

ich bin gerade dabei (meine Website) zu erstellen. Grundlegende Erfahrung in HTML und CSS habe ich. Allerdings gibt es gerade ein Verständnisproblem mit Flexboxen. Das Problem liegt in der Navigationsleiste:

...
<div id="wrapper">
            <h1 id="start">Marcus-Ringer.de</h1>
        <nav>
            <ul>
                <li><a id="active" href="index.html">STARTSEITE</a></li>
                <li><a href="hobbies.html">HOBBIES</a></li>
                <li><a href="blog.html">BLOG</a></li>
                <li><a href="impressum.html">IMPRESSUM</a></li>
            </ul>
        </nav>
        <div id="main">
            <article>
...

Und dem CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url("../bilder/marcus.png");
    background-attachment: fixed;
    overflow: scroll;
    background-repeat: no-repeat;
    background-color: #fff;
    color: #331a00;
}
nav > ul {
	display: flex;
    border-top: 1px solid #a0a0a0;
    border-bottom: 1px solid #a0a0a0;
    background-image: url(../bilder/bg.png)

}

nav > ul > li {
    float: left;
    margin: 1.2em;
    list-style-type: none;
}
nav > ul > li > a {
    color: #331a00;
    font-weight: bold;
    text-align: center;
    font-family: Comfortaa;
    font-size: 1.2em;
    text-decoration: none;
    padding: 0.5em;
    letter-spacing: 0.2em;
    display: block;
}

nav > ul > li > a:hover {
    color: #e6b800;
    font-weight: bold;
    font-family: Comfortaa;
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 0.2em;
}
nav > ul > li > #active {
    color: #e6b800;
    font-weight: bold;
    font-family: Comfortaa;
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 0.2em;
}
div#main {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-image: url(../bilder/bg2.png);
}
h1 {
    font-family: Rock Salt;
    font-size: 2.5em;
    text-align: right;
    color: #331a00;;
    letter-spacing: 0em;
    padding-right: 1em;
    margin: auto;
    width: calc(100% - 1em);
    background-image: url(../bilder/bg2.png);
}
h2{
    font-family: Comfortaa;
    font-size: 1.8em;
    margin: 1em 0 1em;
}
h3{
    font-family: Comfortaa;
    font-size: 1.5em;
    margin: 1em 0 1em;
}
article > p {
    font-size: 1.5em;
    font-family: Comfortaa;
    line-height: 1.5em;
    margin: 1em 0 1em 0;
}
time {
font-size: 1.5em;
    font-family: Comfortaa;
    line-height: 1.5em;
    margin: 1em 0 1em 0;
    color: #e6b800;
}
article {
    flex-shrink: 2;
    padding: 10px;
    width: 90vw;
    margin: 0 5vw;
    z-index: 2;
}
article > img {
    float: left;
    margin: 0 1em 0.2em 0;
    padding: 0;
    max-width: 25vh;
}
article > ul > li {
    line-height: 1.5em;
    font-family: Comfortaa;
    color: #331a00;
    font-size: 1.5em;
}
article > a {
    line-height: 1.5em;
    font-family: Comfortaa;
    font-size: 1.5em;
}

Die Navi-Leiste macht auf Computerbildschirmen einen guten Eindruck. Auf dem Smartphone ist sie jedoch nach dem zweiten Menüpunkt abgeschnitten. Der Rest verteilt sich wunderbar nach unten, doch die Menüpunkte wollen einfach nicht untereinander rutschen, sondern bestehen weiterhin darauf nach rechts aus dem sichtbaren Bereicht zu ragen. Das hat natürlich zur Folge, dass man nach rechts scrollen muss, um den Rest der Navi-Leiste zu sehen.

Entferne ich display: flex aus der ungeordneten Liste (nav > ul), machen die Menüpunkte was sie sollen. Doch dann hat die Liste keine Höhe mehr und somit auch keinen Hintergrund.

Könnt ihr mir sagen wo hier das Verständnisproblem liegt, und wie man das behebt? Vielen Dank schon mal vorab!

Gruß Marcus