Scrolling problem with overflowing content-CodePudding

I have prepared CSS for modal dialog, but there is a problem. If the content part overflows vertically over the wrapper, the scrolling doesn't work properly.

I can scroll but only in a limited range (I can't get to the beginning of the content).

Where am I going wrong?

.fade {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  overflow: scroll;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background: white;
  width: 300px;
}

Some text

<div >
  <div >
    Fist line<br>Text line<br>Text line<br>Text line<br>Text line<br>
    Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
    Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
    Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
    Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
    Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
    Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
    Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
    Text line<br>Text line<br>Text line<br>Text line<br>Last line
  </div>
</div>

CodePudding user response：

The problem is caused by transform: translate(-50%, -50%);. If you change this CSS line to transform: translate(0%, -50%); the problem disappears.

CodePudding user response：

You have to make the content itself positioned relative inside of it's absolutely positioned wrapper.

.fade {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  overflow: scroll;
}

.content-wrapper {
  position: absolute;
  height: 100%;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 300px;
}

.content {
  position: relative;
  background: white;
}

Some text
<div >
   <div >
      <div >
         Fist line<br>Text line<br>Text line<br>Text line<br>Text line<br>
         Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
         Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
         Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
         Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
         Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
         Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
         Text line<br>Text line<br>Text line<br>Text line<br>Text line<br>
         Text line<br>Text line<br>Text line<br>Text line<br>Last line
      </div>
   </div>
</div>