div with min-width set scroll is cut off to the left-CodePudding

I'm trying to create a webpage with a single centered div that represents a piece of paper. It is very important that the size of the paper never changes, so it has both the min-width and max-width properties set:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: scroll;
}

.paper {
  width: 8.5in;
  min-width: 8.5in;
  max-width: 8.5in;
  height: 11in;
  min-height: 11in;
  max-height: 11in;
  background-color: red;
  border: 10px solid black;
}

<!DOCTYPE html>
<html>

<body>
  <div class="paper"></div>
</body>

</html>

The problem is that when the size of the browser window is small (e.g. on mobile), the left side of the div is cut off and cannot be scrolled to.

How can I make it so that it is possible to scroll to the left edge of the div?

CodePudding user response：

<style>
    div::-webkit-scrollbar {
        width: 8px;
    }

    div::-webkit-scrollbar-track {
        background-color: #f6f6f6;
        box-shadow: 0 0 10px #ddd inset;
    }

    div::-webkit-scrollbar-thumb {
        background-color: #1E90FF;
        border-radius: 10px;
    }

        div::-webkit-scrollbar-thumb:hover {
            cursor: pointer;
            background-color: #FF8C00;
        }
</style>

CodePudding user response：

I found that justify-content: center caused this issue - left border not visible.

As per https://www.w3schools.com/cssref/css3_pr_justify-content.asp

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).

Commenting it, made the left border visible.

body {
  overflow: scroll;
  margin: 0;
  display: flex;
  align-items: center;
  /*justify-content: center;*/
}

.paper {
  width: 8.5in;
  min-width: 8.5in;
  max-width: 8.5in;
  height: 11in;
  min-height: 11in;
  max-height: 11in;
  background-color: red;
  border: 10px solid black;
}

<!DOCTYPE html>
<html>

<body>
  <div class="paper"></div>
</body>

</html>

CodePudding user response：

Found the solution in another post: Can't scroll to top of flex item that is overflowing container

Using justify-content causes the div to be snapped to the center of the page, making it impossible to scroll to the left side of the page.

Easiest fix is to use margin: auto for centering instead of flexbox:

.paper {
  margin: auto;
  width: 8.5in;
  min-width: 8.5in;
  max-width: 8.5in;
  height: 11in;
  min-height: 11in;
  max-height: 11in;
  background-color: red;
  border: 10px solid black;
}

<!DOCTYPE html>
<html>

<body>
  <div class="paper"></div>
</body>

</html>