Flexbox在chrome上无法正常工作

Question

我使用以下代码显示5个图像（不使用背景）均匀分布在容器中，并且高度相当于最高的图像（尽管我想知道是否可以这样做用最短的一个）。在图像容器上应用 flex：1; 可以在firefox下获得所需的效果，但在chrome下，5个图像显示为垂直拉伸和超大。期望的效果是使每个容器在给定宽度下保持填充，同时使纵横比的损失最小化。

编辑：我已经在两个浏览器下加载了此页面，但我确实得到了我想要的效果，尽管它们的呈现方式不同。现在我需要找到我的版本与我在这里发布的版本相比有什么问题。

＆＃13;

＆＃13;

body {
  width: 300px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  background-color: black;
}
.row1 {
  display: flex;
  width: 100%;
  background-color: blue;
}
.column {
  height: 100%;
  width: 20%;
  display: flex;
  flex-flow: column;
  position: relative;
  background-color: red;
}
.image-container {
  overflow: hidden;
  display: flex;
  flex: 1;
  background-color: yellow;
}
img {
  width: 100%;
  height: auto;
}
.image-label {
  width: 100%;
  height: 35px;
  display: flex;
  background-color: green;
  justify-content: center;
}
.row2 {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  background-color: cyan;
  height: 20px;
}

＆＃13;

<div class="container">
  <div class="row1">
    <div class="column">
      <div class="image-container">
        <img src="http://www.koka.ac.jp/admission/wp-content/themes/admission/assets/img/common/floating-btn-internet.gif">
      </div>
      <div class="image-label">img1</div>
    </div>
    <div class="column">
      <div class="image-container">
        <img src="http://www.moglix.com/themes/et_poostyle/img/offer.jpg">
      </div>
      <div class="image-label">img2</div>
    </div>
    <div class="column">
      <div class="image-container">
        <img src="http://i.imgur.com/slhFy4T.png">
      </div>
      <div class="image-label">img3</div>
    </div>
    <div class="column">
      <div class="image-container">
        <img src="http://alma-sys.com/images/SLIDE%20MENU%20IMG/WEB%20D%20-%20Copy.jpg">
      </div>
      <div class="image-label">img4</div>
    </div>
    <div class="column">
      <div class="image-container">
        <img src="http://amerpages.com/app/webroot/img/items/121/16716/pds/19682_s.jpg">
      </div>
      <div class="image-label">img5</div>
    </div>
  </div>
  <div class="row2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;