flex-container中flex项目的最小和最大宽度

Question

你好我有一个flex容器，其flex-flow是row-wrap和justify-content：center。我在容器中有两个弹性项目，它们具有最小和最大宽度。当我调整窗口大小时，对于较小的屏幕（可能是525px和以下），Flex项目左侧的内容是不可见的。为什么会发生这种情况？我如何创建一个响应式布局，以便所有分辨率中的项目都可见。我在这里有一个演示，演示上述条件http://codepen.io/abhibly/pen/WxgLjz 有人请告诉我怎么做。

<ul class="flex-container">
<li class="flex-item">1234567</li>
<li class="flex-item">1324444</li>
</ul>

这是我申请了容器及其物品的css

.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
}
.flex-item {
background: green;
height: 150px;
margin-top: 10px;
line-height: 150px;
max-width:500px;
min-width:450px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
flex:1 1;
border-left:5px solid orange;
}