Как создать вертикальную прокрутку (overflow-y) для одной части блока, при этом оставив другую часть блока статичной?

Для реализации вертикальной прокрутки (overflow-y) для одной части блока, при этом оставляя другой блок статичным, вы можете использовать CSS с flexbox и свойством `overflow`. Вот пример того, как это можно сделать:

### HTML

```html
<div class="flex-container">
    <div class="header">Заголовок</div>
    <div class="content">
        <ul class="scrollable-list">
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
            <!-- Добавьте больше элементов, если необходимо -->
        </ul>
    </div>
</div>
```

### CSS

```css
body {
    margin: 0;
}

.flex-container {
    display: flex;
    flex-direction: column;
    height: 400px; /* Задайте нужную высоту */
    border: 1px solid #ccc;
}

.header {
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 18px;
    flex: 0 0 auto; /* Устанавливает фиксированную высоту заголовка */
}

.content {
    flex: 1; /* Занимает оставшееся пространство */
    overflow-y: auto; /* Включает вертикальную прокрутку */
}

.scrollable-list {
    list-style-type: none; /* Убираем маркеры списка */
    padding: 0;
    margin: 0;
}
```

### Объяснение:
- **Flexbox** используется для создания вертикального макета. Контейнер с классом `.flex-container` задает флекс-контейнер с вертикальной ориентацией (`flex-direction: column`).
- Заголовок (`.header`) остается статичным за счет установки `flex: 0 0 auto`, что позволяет ему занимать только то пространство, которое необходимо, и не растягиваться.
- Блок с классом `.content` занимает оставшееся пространство (`flex: 1`) и получает вертикальную прокрутку с помощью `overflow-y: auto`.
- Список внутри блока `.content` прокручивается, когда количество его элементов превышает высоту доступного пространства.

Теперь при прокрутке страницы сначала будет прокручиваться список, и когда он будет достигнут до конца, прокрутка страницы продолжится.

<pre><code class="html">&lt;html&gt;
&lt;head&gt; 
&lt;style&gt;
body{
overflow:hidden;
height:100vh;
}
.overflow{
min-height:100vh
overflow-y:auto;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class=“overflow”&gt;
Content 
&lt;div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> <br/> <br/> К примеру , задаем для body фиксированную высоту, которая равна высоте экрана. Внутри него создаем блок со свойством: overflow-y:auto , что позволяет скролить, в случае если контент больше высоты экрана. Таким образом - сама страница остается статичной и неподвижной, а скроллинг происходит только контента внутри блока div. <br/> <br/> <pre><code class="html">&lt;html&gt;
&lt;head&gt; 
&lt;style&gt;
body{
display:grid;
overflow:hidden;
height:100vh;
grid-template-columns:200px auto;
}
.no-overflow{

}
.overflow{
min-height:100vh
overflow-y:auto;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class=“no-scroll”&gt;
Leftblock 
&lt;/div&gt;
&lt;div class=“overflow”&gt;
Content 
&lt;div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> <br/> <br/> Во втором примере, предварительно сделал сетку на стринце - первый блок (no-overflow) - останется статичным, относительно всей страницы во время скрола