2

I'm using the following HTML structure:

<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>

with the following 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; }

to horizontally and vertically center the <img> tag inside the overlay.

The overflow: auto; does its job, but not correctly. The top of the image (when the page is shrinked down) does not appear. As an example, check out this fiddle. Any ideas on how to fix that?

ForceMagic
  • 516
  • 8
  • 19

1 Answers1

11

That's the expected behavior of justify-content: center; align-items: center: they force flex items to be centered. And since you can't scroll to negative values, the upper-left overflowing parts will remain hidden.

Instead, I recommend centering with auto margins. The there is no available space, they won't force the centering.

.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>
Oriol
  • 274,082
  • 63
  • 437
  • 513