Unable to get Toolbar fixed at the top of the rich text area with content/body scrollable-CodePudding

The intent is to have the ckEditor toolbar fixed at the top while being able to scroll through the content. Currently, toolbar gets scrolled off the screen as shown in the GIF image below.This component is on a page that is scrollable. So the position:fixed; does not work as I tried that.

The label Question Stem stays at the top and is wrapped by Vuetify Toolbar component.

the ck-toolbar class on the toolbar items has the following CSS

.ck.ck-toolbar {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

I have added the following CSS to make the content scrolable.

#ckEditorQuestionStem .ck.ck-toolbar > .ck-toolbar__items {
   position: relative !important;
   z-index: 10;
}
#ckEditorQuestionStem .ck.ck-editor__main {
  max-height: 400px;
  overflow-y: auto;
  position: relative !important;
}

The HTML for this is shown in the screenshot below

I tried the method posted

This was helpful in arriving at the solution.