Есть элемент html страницы https://www.citilink.ru/
левое боковое меню, которое по высоте не помещается на странице. Каким образом можно реализовать скроллбар для него?
.CatalogMenuLeft {
width: 25%;
}
.CatalogMenuRight {
/*height: 1278px;*/
}
.catalogheader {
width: 100%;
height: 35%;
/*display: flex;*/
/*justify-content: center;*/
margin-left: auto;
margin-right: auto;
}
.crossline, .bottompart {
flex: 1;
/*width: 100%;*/
/*height: 33%;*/
}
.crosslineright {
width: 100%;
/*margin-top: 40px;*/
/*margin-left: 20px;*/
/*margin-right: 20px;*/
/*align: right;*/
text-align: right;
}
.windowheader {
flex: 1;
/*width: 100%;*/
/*height: calc(100% - 2*37.5px);*/
/*height: 34%;*/
margin: auto;
text-align: center;
}
.windowheader h4 {
flex: 1;
/*width: 100%;*/
margin: auto;
text-align: center;
}
.flexdisabledscrollbar1, .flexdisabledscrollbar2, .flexdisabledscrollbar3 {
flex: 0;
width: 5px;
border-right: 5px solid #f5f5f6;
}
.flexline1 {
display: flex;
justify-content: center;
height: 33%;
}
.flexline2 {
display: flex;
justify-content: center;
height: 34%;
}
.flexline3 {
display: flex;
justify-content: center;
height: 33%;
}
.flexcontent {
display: flex;
/*overflow-y: scroll;*/
/*height: 70%;*/
}
.menulistitem_selected {
font-weight: bold;
cursor: pointer;
}
.menulistitem_selected::after {
content: "\2192";
/*position: absolute;*/
margin-left: 5px;
display: inline-block;
font-weight: 400;
transition: all .1s ease;
}
.close {
margin-top: -14px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
font-size: 24px;
cursor: pointer;
display: inline-block;
}
.CatalogMenuRight {
/*flex: 1;*/
overflow: auto;
height: 600px;
}
/*.menulistitem {
padding-top: 5px;
padding-bottom: 5px;
}
*/
/* Works on Firefox */
.CatalogMenuRight {
scrollbar-width: auto;
scrollbar-color: #b8b8bc #f5f5f6;
/*overflow-y: scroll;*/
/*height: 200px;*/
}
/* Works on Chrome, Edge, and Safari */
.CatalogMenuRight::-webkit-scrollbar-button {
display: none;
}
.CatalogMenuRight::-webkit-scrollbar {
width: 5px;
}
.CatalogMenuRight::-webkit-scrollbar-track {
background: #f5f5f6;
}
.CatalogMenuRight::-webkit-scrollbar-thumb {
background: #b8b8bc;
border-radius: 2.5px;
border: 0px solid #f5f5f6;
}
.CatalogMenuRight::-webkit-scrollbar-thumb:hover {
background: #b8b8bc;
}
#dropdownwindowright {
width: 75%;
}
.CatalogMenuSearch #SearchBlock {
/*border-bottom: 1px solid orange;*/
}
#SearchBlock {
padding-top: 5px;
/*padding-left: 25px;*/
margin-left: 25px;
margin-right: 50px;
/*padding-right: 50px;*/
display: flex;
/*justify-content: flex-end;*/
height: 35px;
border-bottom: 1px solid #dfdfe1;
}
#SearchInputdiv {
height: 100%;
width: calc(100%-35px);
flex: 1;
/*color: #dfdfe1;*/
/*flex: calc(100%-35px);*/
}
#SearchInput {
width: 100%;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
}
#SearchButtondiv {
height: 100%;
justify-content: flex-end;
width: 35px;
/*flex: 35px;*/
}
#SearchButton button svg{
vertical-align: middle;
fill: #dfdfe1;
/*justify-content: flex-end;
flex: 35px;*/
}
#SearchButton {
outline: none;
border: none;
background: transparent;
cursor: pointer;
}
#SearchButton:active {
outline: 1px solid blue;
}
#menulist {
flex: 1;
overflow: auto;
/*height: ;*/
}
.menulistitem {
padding-top: 5px;
padding-bottom: 5px;
}
/* Works on Firefox */
#menulist {
scrollbar-width: auto;
scrollbar-color: #b8b8bc #f5f5f6;
/*overflow-y: scroll;*/
/*height: 200px;*/
}
/* Works on Chrome, Edge, and Safari */
#menulist::-webkit-scrollbar-button {
display: none;
}
#menulist::-webkit-scrollbar {
width: 5px;
}
#menulist::-webkit-scrollbar-track {
background: #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb {
background: #b8b8bc;
border-radius: 3px;
border: 0px solid #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb:hover {
background: #b8b8bc;
}
<div class="CatalogMenuLeft">
<div class="catalogheader">
<div class="flexline1">
<div class="crossline">
</div>
<div class="flexdisabledscrollbar1">
</div>
</div>
<div class="flexline2">
<div class="windowheader">
<h4>Каталог</h4>
</div>
<div class="flexdisabledscrollbar2">
</div>
</div>
<div class="flexline3">
<div class="bottompart">
</div>
<div class="flexdisabledscrollbar3">
</div>
</div>
</div>
<div class="flexcontent">
<div class="windowmenulist" id="menulist">
<div class="menulistitem" id="smartphonesandgadgets">
Смартфоны и гаджеты
</div>
<div class="menulistitem" id="notebooksandpcs">
Ноутбуки и компьютеры
</div>
<div class="menulistitem" id="tvsaudiovideohifi">
Телевизоры, аудио-видео, Hi-Fi
</div>
<div class="menulistitem" id="householdappliancesforhomeandkitchen">
Бытовая техника для дома и кухни
</div>
<div class="menulistitem" id="constructionandrepair">
Строительство и ремонт
</div>
<div class="menulistitem" id="houseandcottage">
Дом и дача
</div>
<div class="menulistitem" id="photosvideossecuritysystems">
Фото, видео, системы безопасности
</div>
<div class="menulistitem" id="automotiveproducts">
Автотовары
</div>
<div class="menulistitem" id="officesuppliesfurnitureandofficeequipment">
Канцтовары, Мебель и Офисная техника
</div>
<div class="menulistitem" id="beautyandhealth">
Красота и здоровье
</div>
<div class="menulistitem" id="sportsandrecreation">
Спорт и отдых
</div>
<div class="menulistitem" id="productsforgamers">
Товары для геймеров
</div>
<div class="menulistitem" id="discountedproducts">
Уцененные товары
</div>
<div class="menulistitem" id="giftcertificates">
Подарочные сертификаты
</div>
<div class="menulistitem" id="services">
Сервисы и услуги
</div>
</div>
</div>
</div>
overflow
, у васdiv.ps--active-y>.ps__rail-y
сам выскакивает, если контент переполняет контейнер, посмотрите внимательно