How to make my container scrollable while keeping the text displaying partially outside of the container

I am trying to make a div element vertically scrollable while maintaining the header text to appear partially outside the div element like this:(https://i.sstatic.net/B95r6Fzu.png)

This is my code currently without the scrollbar on the div element:

<style>
h1 {
font-family: swirlgarden;
font-size: 55px;
text-align: center;
color: #3d729e;
position: absolute;
top: -150px;
}
.box {
            position: relative;
            width: 950px;
            height: 700px;
            background-color: #fffaf0;
            border: 5px;
            border-style: solid;
            border-color: orange;
            margin: auto;
            margin-top: 100px;
        }
</style>

<div class="box">
<h1><br>Summer Knowledge</h1>
    </div>

However, when I add overflow-y:scroll to the .box style code, it breaks the text so that it ends up looking like this:(https://i.sstatic.net/bmeLVDVU.png)

This is my style code when I add the scroll bar:

 .box {
            position: relative;
            width: 950px;
            height: 700px;
            background-color: #fffaf0;
            border: 5px;
            border-style: solid;
            border-color: orange;
            margin: auto;
            margin-top: 100px;
            overflow-y: scroll;
        }

I want to have the vertical scrollbar while maintaining the way the text was before but Im not sure how.

How about adding an extra <div> inside the box to hold the scrollbar? like this:

.outer-box h1 {
   font-family: swirlgarden;
   font-size: 55px;
   text-align: center;
   color: #3d729e;
   position: absolute;
   top: -92px;
}

.outer-box {
   position: relative;
   width: 950px;
   height: 700px;
   background-color: #fffaf0;
   border: 5px;
   border-style: solid;
   border-color: orange;
   margin: auto;
   margin-top: 100px;
}

.inner-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

<div class="outer-box">
  <h1>Summer Knowledge</h1>
  <div class="inner-box">
  </div>
</div>

That way you don't disturb the header text in any way. Nesting <div> like this is quite normal. Of course there are other ways to solve this issue as well.

Please consider not using fixed pixel sizes for your layout. Have a look at the meaning of responsive web design. It can be a bit overwhelming at first, but there are many libraries to help with this, for instance: Bootstrap, see the "Layout" section in the documentation.