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

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 6.3 替换为 CSS 7.0.

时它消失了

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

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 更改为隐藏。我在片段中看到了它，但没有全屏显示。您的十字架容器没有应用任何边距或填充，因此它可能使用浏览器默认设置并使其触及容器的顶部，它足以在足够小的屏幕尺寸下创建滚动。

编辑：打叉就是抱歉在inspector

里选错了class

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

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

Why does my element have a scrollbar even though it fits its container?

javascript

css

scrollbar

overflow

jspsych