1. Для того чтобы скроллбар отображался ниже нижней границы блока и позволял прокручивать его содержимое, можно использовать CSS свойство `overflow: auto;` или `overflow-y: scroll;` для блока. Например:
```css
.scrollable-block {
height: 300px; /* Высота блока */
overflow: auto; /* Показывать скроллбар при необходимости */
}
```
2. Чтобы создать дизайн скроллбара, который будет соответствовать размеру его блока, можно использовать псевдоэлементы `::-webkit-scrollbar` для Chrome и Safari, `::-moz-scrollbar` для Firefox и `::-ms-scrollbar` для IE. Например:
```css
.scrollable-block::-webkit-scrollbar {
width: 10px; /* Ширина скроллбара */
}
.scrollable-block::-webkit-scrollbar-thumb {
background-color: #ccc; /* Цвет ползунка */
}
.scrollable-block::-webkit-scrollbar-track {
background-color: #f2f2f2; /* Цвет дорожки */
}
```
Также можно использовать свойства `scrollbar-width: thin;` и `scrollbar-color: #ccc #f2f2f2;` для определения ширины и цвета скроллбара в браузерах, поддерживающих эти свойства.
Настраивая скроллбары с помощью CSS, учтите, что не все браузеры поддерживают определенные свойства для кастомизации скроллбаров, поэтому рекомендуется провести тестирование на различных браузерах.