Block elements inside a flex container get squeezed. But why?

Question

I wonder why the 8 inline-block elements inside the flex div get squeezed and do not adhere to their setting (width: 50px).

div {
  display: flex;
  justify-content: center;
  border: 1px solid red;
  width: 150px;
  overflow: auto;
}

a {
  display: inline-block;
  background: orange;
  width: 50px;
  height: 50px;
  margin: 10px;
}

<div>
  <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a>
</div>

Answer 1

The key here is adding "flex-shrink: 0;" and remove "justify-content: center;"

div
{
 display: flex;
 border: 1px solid red;
 width: 150px;
    overflow: auto;
}

a 
{
 display: inline-block;
 background:orange;
 width: 50px;
 height: 50px;
 margin: 10px;
 flex-shrink: 0;
}

<div>
  <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a>
</div>

http://jsfiddle.net/zogybegu/