0

.container{
  height: 400px;
  align-items: center;
  display:  flex;
  flex-direction: column;
  justify-content: center;
}

.sticky{
  position: sticky;
  top: 0;
  background-color: orange;
}
.item{
  padding: 50px;
  background-color: blue;
  margin-top: 5px;
}
<div class="container">
  <h1>Title</h1>
  <p>The supreme</p>
  <div class="sticky">sticky bar</div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>

No logro entender porque el encabezado y el párrafo que esta abajo del encabezado quedan fuera de la caja, espero puedan ayudarme a aclarar esta duda.

Los elementos deberían estarse pintando hacia abajo hacia la dirección final del eje principal, empezando con el encabezado y el parrafo, luego el resto y si hay mucho contenido para el alto del elemento se genera el scroll para acceder al resto de contenido, en este caso no obtengo ese resultado, quisiera saber el ¿por que?

Desde que uso la propiedad overflow, en el flujo normal las cajas se van dibujando hacia abajo y la parte que ya no alcanza, queda oculta y se accede a ella con la barra de scroll, en este caso los primeros dos elementos del contenedor quedan desbordados también , solo que no puedo acceder a ese contenido ni con el scroll.

0

1 respuesta 1

0

Queda afuera porque estás centrando el elemento verticalmente con justify-content: center; introducir la descripción de la imagen aquí

Lo que podes hacer es alinearlo verticalmente al inicio justify-content: start;

introducir la descripción de la imagen aquí

Y luego aplicarle overflow: auto;

.container {
    height: 400px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background-color: gray;
    overflow: auto;
}

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.