mi pregunta en realidad es para confirmar si hay más formas de realizar una alineación horizontal que sobresalga del body pero se mantenga estable gracias a la propiedad overflow: auto;
las dudas me surgieron a la hora de utilizar display: flex;
ya que el ancho y alto de sus hijos se perdió, en realidad ya solucioné en problema pero lo hice metiendo cada hijo dentro de un contenedor(div)
es decir que, los items que quería posicionar horizontalmente terminaron siendo nietos y no hijos del contenedor con display flex;
asi que para resumir mi pregunta, es necesario que para alinear elementos horizontalmente se tenga que meter a los hijos del contenedor con flex dentro de otro contenerdor para que terminen siendo nietos?? osea, no hay una manera más directa? de padre a hijo?
aqui está el ejemplo de como sí me sirvio, donde cada cuadro tuve que meterlo dentro de un contenedor(recomiendo verlo en pantalla completa)
.container-abuelo{
border: 2px solid red;
height: 230px;
overflow: auto;
display: flex;
}
.items{
border: 2px solid blue;
width: 200px;
height: 200px;
background: green;
margin-right: 10px;
}
<section class="container-abuelo">
<div class="container-padre">
<div class="items"></div>
</div>
<div class="container-padre">
<div class="items"></div>
</div>
<div class="container-padre">
<div class="items"></div>
</div>
<div class="container-padre">
<div class="items"></div>
</div>
<div class="container-padre">
<div class="items"></div>
</div>
<div class="container-padre">
<div class="items"></div>
</div>
<div class="container-padre">
<div class="items"></div>
</div>
<div class="container-padre">
<div class="items"></div>
</div>
<div class="container-padre">
<div class="items"></div>
</div>
<div class="container-padre">
<div class="items"></div>
</div>
</section>
ok el de arriba no tiene problema, PERO luego hice lo mismo directamente del padre al hijo y no me funcionó de ninguna manera miren el resultado se "encoje"
.container-padre{
border: 2px solid red;
height: 220px;
overflow: auto;
display: flex;
}
.items{
border: 2px solid blue;
width: 200px;
height: 200px;
background: black;
margin-right: 10px;
}
<section class="container-padre">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</section>
así que hay alguna manera de hacer lo mismo que en el primer ejemplo pero sin tener que meter cada hijo dentro de contenedores?