为什么我的元素有一个滚动条，即使它适合它的容器？

Question

我正在用jsPsych (一个JavaScript库)编写代码，并试图在屏幕上显示一个+。+的最大高度为85 it，最大宽度为85 it，但由于只有60 it，所以两者都没有达到。然而，即使+适合它的容器，它上也有一个滚动条。

我不明白为什么会有滚动条。我使用的是溢出-y:auto，所以只有在必要时才会出现滚动条。但是，我知道这是不必要的，因为在+周围显示一个85 it x 85 the的框显示+小于这些维度。

请查看我的代码片段。请注意，我使用的是jsPsych 6.3，这是不可在线的。因此，代码段中的JavaScript代码使用jsPsych 7.0，但是jsPsych代码来自jsPsych 6.3。我认为滚动条问题来自CSS 6.3代码，因为当我用CSS7.0替换CSS6.3时，它就消失了。

有人知道为什么我的+上有滚动条吗？

​

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>

​

Answer 1

将overflow-y更改为隐藏。我在片段中看到了，但没有在全屏上看到。您的交叉容器没有任何边距或填充应用，因此它可能使用浏览器默认值，并导致它触及容器的顶部，它在一个足够小的屏幕大小的滚动。

编辑:在十字架上，对不起，检查人员选错了类。

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