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

Question

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?

score 0 · Answer 1 · answered Dec 05 '21 at 10:32

0

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

answered Dec 05 '21 at 10:32

Abdalrhman Fahiem

1
1

1

This doesn't help with the problem I'm having, it just styles the scrollbar – thesilican Dec 05 '21 at 10:34

score 0 · Answer 2 · answered Dec 05 '21 at 10:33

0

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>

answered Dec 05 '21 at 10:33

kiner_shah

3,939
7
23
37

Can confirm that scroll works after `justify-content` is removed. However, that causes the `div` to no longer be centered :( – thesilican Dec 05 '21 at 10:35
Maybe the issue is that your device display width is less than the width of the div, so when justify-content tries to center, somehow the left border gets out of the display, but that's just a guess. Maybe you can try replacing `in` inches with `%` or `vw`/`vh`, remove the commented line and see if it works properly. – kiner_shah Dec 05 '21 at 10:37
1

Ok i found a post with the same problem https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container, I will create an answer – thesilican Dec 05 '21 at 10:40
You can check if the div just gets out of display, by translating the div to the right, when the scroll bar reaches left side or just translate it to right without scrolling should also work. – kiner_shah Dec 05 '21 at 10:40
@thesilican, does that mean my guess was right? ;-) – kiner_shah Dec 05 '21 at 10:41
1

yea, easiest solution seems like just use `margin: auto` to center – thesilican Dec 05 '21 at 10:42
Yes I was going to suggest to use `margin: auto`, but wasn't sure if that would work with flex :-) – kiner_shah Dec 05 '21 at 10:43

score 0 · Answer 3 · answered Dec 05 '21 at 10:45

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>

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

3 Answers3