我正在 jsPsych （一个 JavaScript 库）中编写代码，并试图在我的屏幕上显示一个 +。 + 的最大高度为 85vh，最大宽度为 85vw，尽管它没有达到任何一个，因为它只有 60px。然而，即使 + 适合它的容器，也有一个 scrollbar 。

我不明白为什么会有scrollbars。我正在使用 overflow-y:auto，所以 scrollbar 应该只在必要时出现。但是，我知道这是不必要的，因为在 + 周围显示一个 85vw x 85vh 的框表明 + 小于这些尺寸。

请查看我的代码片段以获得视觉效果。请注意，我使用的是 jsPsych 6.3，该版本无法在线获得。因此，片段中的 JavaScript 代码使用 jsPsych 7.0，但 CSS 代码来自 jsPsych 6.3。我认为 scrollbar 问题来自 CSS 6.3 代码，因为当我将 CSS 6.3 替换为 CSS 7.0 时它消失了。

有谁知道为什么我的 + 上有一个 scrollbar ？

const jsPsych = initJsPsych();

const trial = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: '<div class="box">' +
    '<div class="cross">+</div>' +
    '</div>'
}

jsPsych.run([trial])

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);

/* Container holding jsPsych content */

.jspsych-display-element {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.jspsych-display-element:focus {
  outline: none;
}

.jspsych-content-wrapper {
  display: flex;
  margin: auto;
  flex: 1 1 100%;
  width: 100%;
}

.jspsych-content {
  max-width: 95%;
  /* this is mainly an IE 10-11 fix */
  text-align: center;
  margin: auto;
  /* this is for overflowing content */
}

.jspsych-top {
  align-items: flex-start;
}

.jspsych-middle {
  align-items: center;
}


/* fonts and type */

.jspsych-display-element {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 18px;
  line-height: 1.6em;
}


/* PROJECT STARTS HERE */

.box {
  border-style: solid;
  width: 85vw;
  height: 85vh;
}

.cross {
  font-size: 60px;
  max-width: 85vw;
  max-height: 85vh;
  overflow-y: auto;
}

<script src="https://unpkg.com/jspsych@7.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>

.cross {
  font-size: 60px;
  max-width: 85vw;
  max-height: 85vh;
  overflow-y: hidden;
}