sdgroup14

оберните тексты в span и родителю задайте flex-direction column

https://github.com/utatti/perfect-scrollbar
utatti.github.io/perfect-scrollbar

зачем вам тогда display none? делайте скрытие элемента opacity 0; visibility hidden и потом применяйте к ним транзишн....

Я бы сделал без лишней разметки как то так https://codepen.io/sdgroup14/pen/ajQKbq . Так по сути breadcrumbs на сайте делают

я бы вам посоветовал очень хорошо понять базу https://learn.javascript.ru/ (по несколько раз прочитывал весь сайт перед собеседованиями, потому что именно такие вещи и будут спрашивать и этими методами вы всегда будете пользоваться).
Насчет css читайте все что только можно. Суть знаний в css - это опыт. Я свои знания заработал только на практике. Ни в одном гайде не встречал к примеру ситуации, "что в Safari(IOS) в некоторых ситуациях если вы div сделали js кликабельным - то нужно div сделать cursor: pointer... иначе не будет отрабатывать обработчик" + Интерпритаторы в разных браузерах по разному воспринимают свойства... Практика практика и еще раз практика

https://codepen.io/sdgroup14/pen/MBvqdO как-то так... манипулируйте классом __column

https://codepen.io/sdgroup14/pen/oMwGwb . Так сойдет?
выше верно написано, но я бы лучше попробовал максимально средствами css для лучшей прорисовки

как то так!

<style>
.parent {
display: flex;
flex-direction: column;
}
.child:first-of-type{
height: 100%
}

</style>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Грид не кроссбраузерный... лучше сделать последний элемент абсолютом а 2 flex или float или inline-block. все зависит от задачи. Мой совет абсолютом. Кстати ljutaev указал почти верное решение. :) только flex-direction не row a column если можно ограничить высоту... первые 2 друг под другом а 3тий в новой строке на 100% высоты. Опять же все зависит от задачи. Можно и без грид обойтись

https://codepen.io/sdgroup14/pen/KeGQvp?editors=1100

На работоспособность не проверял, но логика такая... Чтоб проверить по клику на сайт, что таргетом не является ваша кнопка и модалка

<style>
.modal {
  display: none
}

.modal.__show{
  display: block
}
</style>
<button type="button" class="btn">toggle Modal</button>

<div class="modal" >Modal text</div>

$('.btn').on('click', function(){
  $('.modal').toggleClass('__show');
})

$('body').on('click', function(e){
  if(e.target !== $('.modal') && e.target !== $('.btn') && $('.modal').hasClass('__show') ){
    $('.modal').removeClass('__show');
  }
})

потому что если я не ошибаюсь оутлайн является "косвенно" стилем... цвет выделения инпута и т.д. к нему транзишн не применяется. хотите красивый оутлайн - делайте через бордер

вот вопрос ваш понятен, а вот исход не логичен. У вас высота активного блока динамическая? если да, то ок, а если нет, то зачем вы 3 раза переопределяете высоту.... Вы очень код свой засоряете....
Для начала создайте нам плункер, чтоб мы увидели, зачем вы 3 раза определяете переменную для высоты, и задаете ее :)

я бы на вашем месте создал function getHeight(){} ..... а потом ее обьявлял и в ресайзе и в клике... А пример нам обязательно нужен потому что с вашего вопроса и кода должно все работать верно... Может что то стороннее мешает или что то вы не учли

https://www.npmjs.com/package/gulp-sass

вот посмотрите. Я бы вам все таки делать через консоль. Есть на это даже очень положительные причины!
Я уже 2 года пишу на scss и настроил gulp под себя очень даже удобно.
Самый главный плюс(для меня) работы через консоль, так это можно грубо сказать - дебаггинг. Я настроил свою сборку так, что если у меня ошибка в компиляции у меня вылетает окно с файлом в котором произошла ошибка и в строке.... это работает через gulp-notif.... в любой ОС. Во вторых консолью нужно учиться/пользоваться обязательно потому что помимо компиляции в css вам нужно делать production версию ваших стилей.... Я уже не говорю о остальных языках