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

Question

I am writing code in jsPsych (a JavaScript library) and am trying to display a + on my screen. The + has a maximum height of 85vh and a maximum width of 85vw, though it does not reach either because it is only 60px. However, even though the + fits its container, there is a scrollbar on it.

I do not understand why there are scrollbars. I am using overflow-y:auto, so the scrollbar should only appear if necessary. However, I know that it is unnecessary because displaying a box of 85vw x 85vh around the + shows that the + is less than these dimensions.

Please see my code snippet for a visual. Note that I am using jsPsych 6.3, which is not available online. Therefore, the JavaScript code in the snippet uses jsPsych 7.0, but the CSS code is from jsPsych 6.3. I think the scrollbar problem comes from the CSS 6.3 code, because it disappears when I replace CSS 6.3 with CSS 7.0.

Does anyone know why there is a scrollbar on my +?

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>

I don't see scrollbars in this example. Seems to work as you intended. — Jeff B, May 18 '22 at 16:59

score 2 · Accepted Answer · answered May 18 '22 at 17:04

Change your overflow-y to hidden. I see it in the snippet but not at full screen. Your container for your cross doesn't have any margins or padding applied so it's probably using browser defaults and causing it to touch the top of the container it's in just enough to create a scroll at a small enough screen size.

Edit: on the cross that is, sorry had the wrong class selected in the inspector

.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?

1 Answers1