Как сверстать такую конструкцию?

Question

[Михаил Р.]

Всем привет. И так, стоит следующая задача:
- У нас есть 2 колонки, первая фиксированной ширины, вторая резиновая в 100% оставшейся ширины.
1. В первой колонке надо сделать так, что бы:
1.1. Вертикально фон всегда был на всю страницу.
1.2. Контент левой колонки при прокрутки правой - фиксирован.
1.3. При наведение мыши на левую колонку у нас появляется возможно вертикальной прокрутки.
Как такую "конструкцию" реализовать. Я перепробовал массу вариантов, но в каждом часть требований не работает.. =(
Заранее спасибо!

Answer 1

[Vladislav Dragalev]

Вот, желательно проверять эту разметку локально для достижения нужного эффекта) codepen.io/anon/pen/dYyLVZ а на счет последнего пункта, пишите обработчик, чтобы при наведении на левый блок изменять его overflow-y с hidden на scroll.

Comments

[Михаил Р.]

Vladislav Dragalev допустим, а как дальше сделать 2 и 3 пункты?

[Vladislav Dragalev]

Mike Ro: подождите секунду) хромированный браузер немного подвис)

Answer 2

[Антон]

Как уже сказали, display: flex;
В колонку с фиксированной шириной вкладываем фиксированный див

top: 0;
left: 0;
height: 100%;
position: fixed;
width: 300px;
overflow-y: scroll;