You can do it by setting the top spacing to the parent and the bottom spacing to the child.

• Make the parent scrollable
• Hide parent scrollbars (since visually the scrollbars touch the window bottom edge)
• Adding a margin-bottom to the child element

* {margin: 0;box-sizing: border-box;}

body {
  background: #0fb;
}

.Popup {
  position: fixed;
  width: 70vw;
  top: 15vh;
  left: 15vw;
  bottom: 0vh; /* has to be at 0! */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* FF https://stackoverflow.com/a/49278385/383904 */
  -ms-overflow-style: none; /* IE 10+ */
}

.Popup::-webkit-scrollbar { /* WebKit */
  width: 0;
  height: 0;
}

.Popup-content {
  padding: 20px;
  height: 150vh;   /* Demo only... you place text inside */
  margin-bottom: 15vh; 
  border: 10px dashed #000;
  background: #0bf;
}

<h2>Lorem Ipsum</h2>
<div class="Popup">
  <div class="Popup-content">
    Scroll...
  </div>
</div>

Without hiding the scrollbars I don’t think there’s any sane solution to do it in pure CSS, not without the use of some JavaScript.

I’m trying to make a popup-div which has very long information.

I wonder that at inner div, there is no end-point at bottom, because there are hidden informs, like:

┌────────────────────────┐
│                        │
│ ┌───────────────────┐  │
│ │                   │  │
│ │                   │  │
│ │                   │  │                  
│ │        ...      ↓ │  │        // ↓ means scroll down to see more.                          
└────────────────────────┘

And scrolling down to the end of the inner div:

┌────────────────────────┐
│                        │
│ ┌───────────────────┐  │
│ │       ...         │  │
│ │                   │  │
│ │                   │  │                  
│ └───────────────────┘  │                          //  │ └───────────────────┘  │   <- the endpoint showed up! 
└────────────────────────┘                              

│ └───────────────────┘ │ end-point has appeared.

Is it possible?