為什么我的元素有一個滾動條，即使它適合它的容器？

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;
}