Flex容器中的项目是重叠的

Question

我有以下样式表：

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100vw;
  height: 50vh;
  overflow: hidden;
  background-color: #888;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .gallery-container {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    width: auto;

    .image {
      display: block;
      width: auto;
      max-width: 100vw;
      opacity: .5;

      .inner-image {
        display: block;
        width: auto;
        height: 100%;
      }
    }
  }
}

我正在使用以下标记：

<div class="gallery">
  <div class="gallery-container">
    <div class="image">
      <img src="..." class="inner-image">
    </div>
    <div class="image">
      <img src="..." class="inner-image">
    </div>
  </div>
</div>

现在问题是当我加载页面时元素重叠：

调整浏览器窗口大小后，或放大＆amp;缩小它们看起来是堆叠的，彼此相邻，这是期望的行为。

这里有什么问题？

P.S。这是pen

Answer 1

我将以下属性添加到.image：

.image {
  width: auto;
  height: 100%;
  flex: none;
  overflow: hidden;
}

它呈现正确。这是更新的pen