CSSでflexboxを使ってウインドウサイズを縮めると不具合がでる

下記はflexboxを使ったナビゲーションを作っています。
下記のソースは、ウインドウサイズを縮めるとメニューボタンが縦になっていくのですが、
１段目が切れて表示されてしまいます。
全てを表示させるにはどうしたらいいでしょうか？

＜HTML＞

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main_style.css">
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
<header>
  <nav> 
    
    <!-- logo -->
    <div class="logo">
      <h1><a href="index.html"><span>株式会社DPRK</span></a></h1>
    </div>
    <!-- logo -->
    
    <ul>
      <li class="menu01"><a href="#">ホーム<br>
        <span>HOME</span></a></li>
      <li class="menu02"><a href="#">会社概要<br>
        <span>COMOPANY</span></a></li>
      <li class="menu03"><a href="#">事業内容<br>
        <span>WORKS</span></a></li>
      <li class="menu04"><a href="#">ニュース<br>
        <span>NEWS</span></a></li>
      <li class="menu05"><a href="#">採用情報<br>
        <span>RECRUIT</span></a></li>
      <li class="menu06"><a href="#">お問い合わせ<br>
        <span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>

＜CSS＞

@media all and (min-width: 608px) {
	
* {
	margin:0;
	padding:0;
}

body {
	color:#333;
	margin: 0;
}

.logo {
	float:left;
	width:250px;
	padding-right:20px;
}



a:hover {
	transition: 0.5s ;
	background: #EEE;
	opacity: 0.4;
	filter: alpha(opacity=40);
	-ms-filter: "alpha(opacity=40)";
	
}

h1 {
  	width:250px;
  	height:71px;
  	background-image:url("../img/logo.png");
  	background-repeat:no-repeat;
}

h1 span {
	display:none;
}

h1 a {
	display:block;
  	width:250px;
  	height:71px;
}

nav {
	background-color:#fff;
	padding-top:10px;
	padding-bottom:10px;
	display: -webkit-flex;
    display: flex;
	-webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
	height: 83px; /* 高さ */
  	width: 100%; /* 長さ */
  	position: fixed; /* ヘッダーを固定(これが重要) */
  	top: 0; /* 固定する位置 */
	left: 0; /* 固定する位置 */
  	right: 0;  /* 固定する位置 */
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	z-index:1;
}

nav ul {
	list-style:none;
	text-align:center;
	display: flex;        /* flexコンテナ化 */
   	flex-direction: row; /* 横向きに配置 */
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

nav .menu01, .menu02, .menu03, .menu04, .menu05, .menu06 {
	width:125px;
	background-color:#FFF;
	font-weight:bold;
}

nav .menu02, .menu03, .menu04, .menu05, .menu06 {
	border-left: solid 1px #CCC;
	-moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   
}

nav a {
	width:100%;
	display:block;
}

nav span {
	
	color:#CCC;
	font-weight:100;
	line-height:3em;
}

nav a:link { color: #333; }
nav a:visited { color: #333; }
nav a:hover { color: #333; }
nav a:active { color: #333; }

a {
	text-decoration:none;
}

}

「フルサイズのウインドウ」