Как заставить блок занимать всю свободную высоту и добавить к нему прокрутку, если родитель position:relative?

Question

[Vlad Osadchyi]

Есть такая верстка сайдбара

у красного блока такие стили

position: fixed;
    top: 60px;
    bottom: 0;

блок A всегда должен быть вверху красного блока
блок С всегда должен внизу красного блока
блок B должен занимать всю свободную высоту между A и C
блок B может содержать много ссылок, и поэтому он должен прокручиваться вертикально, если ссылки не помещаются в доступное пространство.

Как все это реализовать? Желательно без js. Можно с помощью bs4.

Answer 1

[Brad9aga]

https://jsfiddle.net/1s0eygmb/2/
допишешь fixed ничего не изменится
там не понятно у какогго родителя позиционирование relative.
так?
сделал все что мог
флексы решают все вопросы

Comments

[Vlad Osadchyi]

спасибо, вроде оно, сейчас попробую применить на свою верстку

[Brad9aga]

Vlad Osadchy, изучай флексбокс

[Vlad Osadchyi]

Brad9aga, попробовал обернуть .wrap в блок с position:fixed, в твоем примере все работает, в моей верстке .main становиться высотой +2000px и содержимое, которое не вмещается на экран не видно, не понимаю, почему так?

[Vlad Osadchyi]

Brad9aga, если же к моему сайдбару добавить свойства .wrap, то все збс) так, что огромное спасибо! очень мне помог