Centering Items with Flexbox and Overflow

Question

Problem Summary

My desired layout is to be able to center (both vertically and horizontally) an image of unknown size on the page. If the image is too big to fit in either direction, I want to show scroll bars so the user can scroll to see the full image. The issue I've run in to is that when the image is too big to fit, the top and left of the image (depending on what portion is cut off) will never be able to be scrolled to.

Attempted Solution

I am attempting to use flexbox to achieve the desired layout, but flexbox is not a requirement. Here is a small example that reproduces the problem (note that I haven't put any browser prefixes in the CSS, so you will want to view this in Chrome [or maybe Firefox, too?]):

.body {
  height: 600px;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  height: 100%;
  overflow: auto;
}

img {
  border: 5px solid black;
}

<div class="body">
  <div class="container">
    <img src="http://placehold.it/700x700" />
  </div>
</div>

You should be able to see the border completely around the image, but the left and/or top part of the image will get cut off as the window shrinks. More and more of the image will become un-viewable as the window continues to shrink.

Note that it doesn't seem to matter if there is an image in there. Here's a snippet just using plain-old divs to show the problem:

.body {
  height: 600px;
  margin-top: 80px;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  height: 100%;
  overflow: auto;
}

.content {
  border: 5px solid black;
  width: 600px;
  height: 600px;
  background-color: gray;
}

<div class="body">
  <div class="container">
    <div class="content"></div>
  </div>
</div>

Again the entire div should always be reachable by scrolling, but it is not.

Question

How can I achieve the desired layout described above using only HTML and CSS (JS answers not accepted)? Flexbox is not required to solve the problem, but it would be a nice-to-have.

Thanks!

Answer 1

Just remove the justify-content from your .container and add a margin: auto to your image.

.body {
  height: 600px;
}

.container {
  margin: auto;
  display: flex;
  /* align-items: center; // no need for this anymore */
  /* justify-content: center; // remove this */
  border: 1px solid red;
  height: 100%;
  overflow: auto;
}

img {
  border: 5px solid black;
  margin: auto;  /* add this */
}

<div class="body">
  <div class="container">
    <img src="http://placehold.it/700x700" />
  </div>
</div>