жен создать макет, в котором сетка контента должна быть на всей оставшейся странице, но макет также имеет панель навигации.

Для этого я решил разместить панель навигации в гибком контейнере, а содержимое в строке с высотой 100%. Мне нужно содержимое, чтобы заполнить оставшееся пространство. Меню динамическое, поэтому я не могу знать, какова высота панели навигации.

Однако на меньших экранах панель навигации изменяет размер не правильно. Если меню расширено, оно будет наложено на содержимое.

<div class="container-fluid h-100 d-flex flex-column">

  <nav class="navbar navbar-expand-sm s-navbar">
     ...
  </nav>
  <div class="row h-100">
     ...// content presented here
  </div>
</div>

Вы можете видеть это здесьhttps://jsfiddle.net/ej9fd368/8/ что последний пункт меню вырезан из-за желтого содержимого.

Мое требование состоит в том, что контент должен заполнять остальную часть страницы.