具有最小宽度设置滚动的 div 被向左截断答案

【问题标题】：div with min-width set scroll is cut off to the left具有最小宽度设置滚动的 div 被向左截断
【发布时间】：2022-01-10 22:41:48
【问题描述】：

我正在尝试创建一个网页，其中包含一个代表一张纸的居中 div。纸张的大小永远不会改变是非常重要的，因此它同时设置了min-width 和max-width 属性：

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>

问题是当浏览器窗口尺寸较小时（例如在移动端），div的左侧被截断，无法滚动到。

我怎样才能使它可以滚动到 div 的左边缘？

【问题讨论】：

标签： html scroll width overflow

【解决方案1】：

在另一篇文章中找到了解决方案： Can't scroll to top of flex item that is overflowing container

使用justify-content 会导致 div 被吸附到页面的中心，从而无法滚动到页面的左侧。

最简单的解决方法是使用margin: auto 而不是弹性框来居中：

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

【讨论】：

【解决方案2】：

我发现justify-content: center 导致了这个问题 - 左边框不可见。

根据https://www.w3schools.com/cssref/css3_pr_justify-content.asp

justify-content 属性会在项目未使用主轴（水平）上的所有可用空间时对齐灵活容器的项目。

评论它，使左边框可见。

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>

【讨论】：

可以确认在justify-content 被删除后滚动工作。但是，这会导致 div 不再居中:(
也许问题是您的设备显示宽度小于 div 的宽度，因此当 justify-content 尝试居中时，左边框不知何故超出了显示范围，但这只是猜测.也许您可以尝试将in 英寸替换为% 或vw/vh，删除注释行，看看它是否正常工作。
好的，我找到了一个有同样问题的帖子stackoverflow.com/questions/33454533/…，我会创建一个答案
是的，最简单的解决方案似乎只是使用margin: auto 居中

【解决方案3】：

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

【讨论】：

这对我遇到的问题没有帮助，它只是设置滚动条的样式