CSS: problema che devo risolvere subito, entrate please

😈╰•ALBERTO•╯😈

Siccome sto costruendo un sito da presentare al corso, avevo intenzione di creare un div con all'interno altri div quadrati scorrevoli, ma la barra di scorrimento non funziona e i quadrati si restringono fra loro. C'è altra alternativa per farlo funzionare?

Questo è il codice che ho scritto:

`#box1{
border: red 1px solid;
width: 1500px;
height: 450px;
position: relative;
top: 300px;
left: 200px;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
flex-direction: initial;
gap: 50px;
}

.container1, .container2, .container3, .container4, .container5, .container6{
border: red 1px solid;
width: 300px;
height: 395px;
position: relative;
top: 20px;
}`

Paride754

😈╰•ALBERTO•╯😈 faccio il sistemista io. Non sono un dev

Giulio_M

😈╰•ALBERTO•╯😈 beh, alcune considerazioni:

layout per niente responsive (width, height definiscili in termini percentuali e non px!!!); anche se poi in realtà la proprietà overflow ha senso quando parliamo di dimensioni fisse
nell'esempio fatto da te io devo ridurre lo zoom della pagina altrimenti sul mio notebook non vedo tutto il rettangolo ahah (capisci quindi l'importanza del "responsive")
il problema sta qui: questa configurazione per qualche strana ragione non ti gestisce bene i div annidati (il contenitore esterno come ID e gli interni come classe), allora usa un semplice div standard come contenitore esterno e poi ho aggiunto qualche correzione alla classe .container per i div annidati (NB essendo uguali, in questo caso è più funzionale definirne uno e richiamarlo 6 volte piuttosto che definirne 6 tutti uguali!!!): quindi prova a fare come segue:

Codice CSS:

div{
border: red 1px solid;
width: 1500px;
height: 450px;
position: relative;
top: 300px;
left: 200px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
flex-direction: initial;
gap: 50px;
}
.container1{
border: red 1px solid;
width: 300px;
height: 395px;
position: relative;
overflow:auto;
top: 20px;
left: 20px;
}

Codice HTML (questa parte dei <div>):
<div><div class="container1"></div><div class="container1"></div><div class="container1"></div><div class="container1"></div><div class="container1"></div><div class="container1"></div></div>
Come vedi il primo è un <div> generico, all'interno ci sono i vari <div class="container1"></div> e poi infine ovviamente la chiusura anche del principale </div>

Anche se magari come ho detto non è la strada più funzionale in termini assoluti (poi spesso gli slider di questo genere si fanno con JavaScript), effettivamente in questo modo funziona, viene visualizzata la barra per lo scroll orizzontale.

ퟀퟀퟀퟀퟀퟀퟀퟀ.̅̿ͯͤ͆ͥͧ͆̓͋͒.̿̈́̐́̒͆́̓̃̅ͤ͋̂ͦ̐ͥ͌̈́͒s̏̍a̓̋̐ͫw̓.̅̿ͯͤ͆ͥͧ͆̓͋͒̈́͛ͥ͆.̿̈́̐́̒ퟀퟀퟀퟀퟀퟀퟀퟀ

Amico salutami i ragazzi di dontpanic e digli che sto bene

😈╰•ALBERTO•╯😈

Giulio_M alla fine ho risolto dopo 20 minuti dalla domanda.

GrimoireMononokheart

Prova così:

HTML:

CSS:

#box1{
box-sizing: border-box;
border: red 1px solid;
width: 1500px;
height: 450px;
position: relative;
top: 300px;
left: 200px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}

.container{
display:inline-block;
margin: 0 50px;
box-sizing: border-box;
border: red 1px solid;
width: 300px;
height: 395px;
position: relative;
top: 20px;
}
.first{margin-left:0;}
.last{margin-right:0;}