Question

我今天遇到了奇怪的情况。我设法将代码减少到最少，以重现该问题。

https://codesandbox.io/s/beautiful-glade-kphm6

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: linear-gradient(180deg, #130040 0, #5d09ce 40vh) no-repeat;
}

.position-relative {
  position: relative;
}

.overflow {
  background: blue;
  height: 500px;
  overflow: auto;
  margin-bottom: 30px;
  width: 80%;
}

.content {
  height: 3000px;
  background: red;
  display: flex;
  align-items: flex-end;
}

.visually-hide {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.wtf {
  padding-left: 1px;
}

<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />

</head>

<body>
  <div class="position-relative">
    <div class="wtf">
      <div class="overflow">
        <div class="content">
          <input type="checkbox" class="visually-hide" />
        </div>
      </div>
    </div>
  </div>
</body>

</html>

当您在Chrome（与Firefox相反）中打开此示例时，您会注意到body和html的底部溢出。当您删除wtf类（仅添加padding-left）时，溢出消失了。

hide-visually样式来自polished包。

有人可以解释这里发生的情况吗，是Chrome错误还是我做错了事？

溢出：自动，位置：Chrome 78中的相对位置和相对左填充会导致HTML溢出

0 个答案: