Problema:
El div llamado "boxNavRight" no ocupa el alto total, me gustaría que ocupe todo el espacio del div "boxNav".
no he logrado conseguir esto, cuando asigno una altura definida a "boxNav" ejemplo 500px funciona pero no debe tener una altura definida, ya que cuando la pantalla es pequeña al tener la propiedad flex-wrap envía al div "boxNavRight" hacia abajo y si tiene una altura definida el contener padre este se desborda..
html {
width: 100%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-behavior: smooth;
font-size: var(--text-small);
}
body {
width: 100%;
height: 100%;
background: var(--color-second);
display: flex;
justify-content: center;
align-items: center;
}
.contenedor {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-second);
padding: var(--margin-medium);
}
.boxNav {
width: 100%;
max-width: 1000px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: whitesmoke;
padding: var(--margin-medium);
border-radius: var(--border-radius-medium);
font-size: var(--text-small);
}
.boxNavLeft {
width: 500px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.boxlistUl {
margin-left: var(--margin-medium);
}
.boxNavRight {
width: 450px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: aliceblue;
}
<div class="contenedor">
<div class="boxNav">
<div class="boxNavLeft">
<div class="boxList">
<ul class="boxlistUl">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</div>
</div>
<div class="boxNavRight">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti nam libero
magni amet esse praesentium officiis excepturi quis repellat? Blanditiis quas incidunt
adipisci quo quia qui quos? Id, laborum!
</p>
</div>
</div>
</div>