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

Question

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

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

请查看我的代码片段以获得视觉效果。 请注意，我使用的是 jsPsych 6.3，该版本无法在线获得。 因此，片段中的 JavaScript 代码使用 jsPsych 7.0，但 CSS 代码来自 jsPsych 6.3。 我认为滚动条问题来自 CSS 6.3 代码，因为当我用 CSS 7.0 替换 CSS 6.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;
}