Можно ли установить 'border-radius' при достижении конца div?

Question

Я пытаюсь создать popup-div, который содержит очень длинную информацию.

Интересно, что во внутреннем div нет конечной точки внизу, потому что есть скрытые данные, такие как:

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

И прокрутка вниз до конца внутреннего делителя:

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

│ └───────────────────┘ │ появилась конечная точка.

Возможно ли это?

Answer 1

Вы можете сделать это, установив верхний интервал для родителя и нижний интервал для ребенка.

• Сделать родительскую прокручиваемую
• Скрыть родительские полосы прокрутки (поскольку визуально полосы прокрутки касаются нижнего края окна)
• Добавление нижнего поля к дочернему элементу

* {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>

Не скрывая полос прокрутки, я не думаю, что есть какое-то разумное решение сделать это в чистом CSS, не без использования некоторых JavaScript.