1

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>

0

2 respuestas 2

0

Podrías darle una altura fija al contenedor boxNavRight, y que esa altura sea el mismo que del contenedor boxNav:

.boxNavRight {
  width: 450px;
  height: 300px;
  background-color: aliceblue;
}

Por cierto, no hace falta que el contenedor boxNavRight sea flexible, no ocurre ningún efecto en especial, aquí lo quité.


También apliqué un @media para que la altura vuelva a como estaba, este cambio ocurrirá cuando el ancho de la pantalla sea de 965px, y adicionalmente, el ancho ocupará todo el contenedor del boxNav con width: 100%:

@media (max-width: 965px) {
  .boxNavRight {
    width: 100%;
    height: 100%;
  }
}

Código completo.

0

Lo más simple es ocupar css Grid, el truco está en esta instrucción

grid-template-columns: repeat(auto-fit, minmax(500px,1fr));

Que dices que va a haber un número indeterminado de columnas (el repeat hace esto), pero en tu caso solo tienes 2 elementos, por lo que la única posibilidad son una o 2 columnas, es decir tirar lo de la derecha para abajo

Luego minmax disce que las columnas serán de 500px de lo contrarios ocuparan todo el ancho

.boxNav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px,1fr));
}
.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">

   <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 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.