.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 subtituloel 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 lo primero en el marcadoencabezado y el parrafo, luego lo segundoel resto y si hay demásmucho 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 lo primero que va apareciendo queda fueralos primeros dos elementos del contenedor quedan desbordados también , solo que no puedo acceder a ese contenido, ni con el scroll.