h3有滚动行为

Question

不知为什么，我的 h3 元素想要滚动。我试着测试了一下，似乎是在这段代码中。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
  width: 100%;
}

.model-detail-caption {
  font-family: "Oswald";
  font-size: 5rem;
  font-weight: 700;
  color: #fff;
  position: absolute;
  bottom: 20%;
  left: 20px;
  width: 100%;
  border-left: 4px solid var(--accent);
  padding: 0px 0px 0px 10px;
}

<h3 class="model-detail-caption">Some Text</h3>

Answer 1

position: absolute; bottom: 20%; left: 20px; 会导致这种行为。