无论屏幕宽度如何，Flexbox都包装无包装

Question

我有一行约有60个项目（无法确切知道它们的数量），我想要做的就是显示它们类似于mac（example），但是我的项目无论屏幕分辨率如何，屏幕上始终可见。

结束

为了更清楚，我真正需要的是物品展示部分;实现类似于此示例中的红色行，但从不需要滚动（在某种尺寸，这需要滚动;尝试调整屏幕大小）

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.nowrap  { 
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="flex-container nowrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
</ul>

Codepen: http://codepen.io/team/css-tricks/pen/1ea1ef35d942d0041b0467b4d39888d3

希望已经清楚了！提前谢谢。