Flexbox wrap no-wrap no matter screen width

Question

I have a row with about 60 items (no way to know exactly how many they will be), and what I want to do is to display them mac-like dock (example), but with my items always being visible on screen, no matter screen resolution.

To conclude

To be clearer, what I actually need is the items display part; to achieve something like the red row from this example, but never needing to scroll (at some size, this needs to scroll; try resizing the screen)

.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

Hope to have been clear! Thank you in advance.