sergski

nav не исчезает, а получает значение по умолчанию flex-grow: 0

Вы хотите сделать маску на картинку? Оберните в svg <path> в <clipPath> и задайте в css clip-path для него.

https://codepen.io/Snowsides/pen/QWdgOvZ

div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid black;
}

.text {
  font-size: 30px;
  line-height: 20px;
  padding: 0;
  margin: 0;
}

Решение создавать отдельные css для разных версий браузеров из стародавних времен (типа ie7,-8-9), и имеет смысл, если у вас отдельный бюджет от заказчика на поддержку старых версий.
Сейчас половина трафика уже с моб.версий сайтов и разумнее идеально сделать "сначала мобильные", чем писать двойной код для исчезающего кол-ва адептов ie11) да и поддерживать такой код довольно неудобно.
Сообщество, имхо уже пришло к мнению, что верстка не обязана выглядеть одинаково везде, достаточно, чтобы она на старых версиях выглядела аккуратно.
А ваш пример можно переписать так без ущерба и заметно меньше и поддерживать удобнее:

.photo-layout {
    display: flex;
    flex-flow: row wrap;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.photo-layout > div {
    width: auto;
    flex: 1;
    margin: 1rem;
}

в select2 использовал этот

на flex:

tr {
    display: flex;
    flex-wrap: wrap;
  
    td {
          flex-basis: 50%;
          box-sizing: border-box;
    }
}

При клике вы для .header__list запускаете метод slideToggle(), который присваивает ему style="display: none", поэтому и не отображается. Следовательно, в вашем случае, нужно убирать атрибут style при ширине больше 740px.

вы бы свой код привели для ясности.
если вы в js получили значение высоты и хотите его передать в css переменную, то можно так:

css:

.box {
   height: var(--height);
}

document.querySelector('.box').style.setProperty('--height', height + 'px');

допишите в body {overflow: hidden; position: relative;}