Estimados programadores, Espero que se encuentren bien. Mi nombre es Adrian y estoy enfrentando un problema de codificación en un proyecto que estoy trabajando. Estoy seguro de que entre todos ustedes hay alguien que puede ayudarme a resolverlo. Me encantaría pedirles su ayuda y sabiduría en este asunto. Si es posible, les agradecería si pueden revisar mi código y darme su opinión sobre cómo resolver el problema. Estoy seguro de que juntos podemos encontrar una solución efectiva. Agradezco de antemano su tiempo y ayuda. Si necesitan más información o detalles sobre mi problema, estaré encantado de proporcionarlos. Les agradezco de nuevo por su tiempo y espero su respuesta pronto. Atentamente, Adrian 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.. ``` <!DOCTYPE html> <html lang="es" dir="ltr"> <head> <title>APP</title> <style> 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; } </style> </head> <body> <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> </body> </html> ```