Skip to main content
1 de 2

El primer elemento de un contenedor flexible queda afuera de la caja, teniendo el contenedor un height fijo y overflow: auto

.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 subtitulo 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 lo primero en el marcado, luego lo segundo y si hay demás 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 lo primero que va apareciendo queda fuera también, solo que no puedo acceder a ese contenido, ni con el scroll.