ivan1kazantsev

codepen.io/anon/pen/NpQqdv

Теперь понятно, о чем ты...Высота в процентах не считается, если высота родителя зависит от контента (кроме абсолютного позиционирования).

В твоем случае можно сделать так:

.main {
  position: relative;
}
.block-1 {
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0;
  left: 0;
}
.block-2 {
  padding-left: 200px;
}

Так у вас футер и растягивают по высоте просмотренные товары. Задайте минимальную высоту.

li:last-of-type::after {}

А вообще внутри ul увидеть что-то кроме li нельзя, из чего следует: последний дочерний элемент будет li. Это дает возможность использовать :last-child без опасений.

Можно использовать позиционирование, например, так. В вашей задаче это будет немного по-другому, но смысл, думаю, донесу: https://jsfiddle.net/wqLdb03x/3/

Текст выходит за пределы основного блока из-за явно заданной ему высоты height. Задавать высоту вообще не есть хорошо. Если нужно задать какую-то стартовую высоту, нужно использовать min-height.

То же самое сказал Николай.

Да. Да.

Там еще и отступ в виде пробела появляется.

Обнулить шрифт родителю, вернуть лишкам.
Или одной строкой в коде лишки расположить.
Или отрицательный маргин.

.menu-list li {
  flex-grow: 1;
}

Оборачивают в центровщик.

https://jsfiddle.net/9auux25s/

Много лишнего, обертки под инпуты вообще не понятно для чего нужны.

Как-то так, но это набросал, можно и лучше: https://jsfiddle.net/t3k8mskj/5/

Отвечу обобщенно. Ни один из родителей не должен иметь z-index меньше, чем у слайдера. Либо отключать z-index у родителей вообще, либо делать больше.

Да, через flex реально. Изучай. Там будет использоваться order для изменения порядка блоков.