Flexbox溢出 - 缺少元素的顶部？

Question

我使用以下HTML结构:

<div class="imgview_overlay" id="imageviewer">
    <div class="overlay_content">
        <div class="overlay_inner" id="overlay_img_div">
            <img id="overlay_img" alt="overlayed_image" style="visibility: hidden;" />
        </div>
    </div>
</div>

使用以下CSS:

.imgview_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.2); visibility: hidden; z-index: 500; }
.overlay_content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: auto; }
.overlay_inner { display: inline-block; }

将<img>标签水平和垂直居中放置在叠加层内.

在overflow: auto;它的工作,但不正确.图像的顶部(当页面缩小时)不会出现.举个例子,看看这个小提琴.关于如何解决这个问题的任何想法？

Answer 1

这是预期的行为justify-content: center; align-items: center:它们强制灵活项目居中.由于您无法滚动到负值,因此左上角的溢出部分将保持隐藏状态.

相反,我建议使用auto边距居中.没有可用的空间,他们不会强迫居中.

.imgview_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  z-index: 500;
}
.overlay_content {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.overlay_inner {
  margin: auto;
}

<div class="imgview_overlay" id="imageviewer">
  <div class="overlay_content">
    <div class="overlay_inner" id="overlay_img_div">
      <img id="overlay_img" alt="overlayed_image" src="http://lorempixel.com/800/400/" />
    </div>
  </div>
</div>