Skip to main content
se añadieron 22 caracteres en el cuerpo
Origen Enlace

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

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

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

Origen Enlace

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.