Bootstrap 4 Navbar y contenido de relleno de flexbox

Tengo que crear un diseño en el que una cuadrícula de contenido tenga que estar en la página restante completa, pero el diseño también tiene una barra de navegación.

Para hacer esto, decidí colocar la barra de navegación en un contenedor flexible y el contenido en una fila con una altura del 100%. Necesito el contenido para llenar el rest del espacio restante. El menú es dynamic, así que no puedo saber cómo es la altura de la barra de navegación.

Sin embargo, en pantallas más pequeñas, la barra de navegación no cambia de tamaño correctamente. Si el menú se expande, el menú se superpone con el contenido.

...// content presented here

Puede verlo aquí https://jsfiddle.net/ej9fd368/8/ que el último elemento del menú se corta debido al contenido amarillo.

Mi requisito es que el contenido llene el rest de la página.

En lugar de usar h-100 en el área de contenido amarillo, agregue una clase de CSS adicional para hacer que flex-grow: 1 en altura …

 .flex-fill { flex:1 1 auto; } 

https://www.codeply.com/go/xBAMfbHqbN

  

Nota: La clase de utilidad flex-fill se incluirá en la próxima versión de Bootstrap 4.1: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

( Demo actualizada de Bootstrap 4.1 )


Pregunta relacionada: Bootstrap 4: ¿Cómo hacer que la fila se estire la altura restante?