Currently when an HTMLElement becomes jsPsych's display element, the following structure is created (assuming the display element is a div):

<div class="jspsych-display-element">
  <div class="jspsych-content-wrapper">
    <div class="jspsych-content">
       /* plugins dump stuff here */
    </div>
  </div>
</div>

I don't recall why we have this nested structure. My best guess is that it has to do with the progress bar, which would need to be displayed in the .jspsych-display-element but not in the content that the plugin controls.

The main issue with the current arrangement is that .jspsych-content doesn't have a width or height, so a plugin can't use a rule like height: 100% to take up the entire display. A plugin could use height: 100vh; but this would be bad practice since it wouldn't respect the boundaries of the display element in cases where that element doesn't take up the full viewport.

I'd like to find a CSS and DOM structure that fixes this issue, while preserving the functionality of the progress bar.