Come è possibile creare un contenitore Flexbox che si estende per adattarsi agli elementi confezionati?

Question

Desidero un contenitore flexbox flex-direction: column; la cui larghezza aumenta per adattarsi agli elementi di contenimento.

In this codepen:

Il div grigio è il contenitore FlexBox e div rossi sono contenute dentro e disposti in colonne con FlexBox. Il div grigio deve espandere/contrarre la sua larghezza per contenere perfettamente le div rosse dei bambini. È possibile?

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    max-height: 290px; 
 
    align-content: flex-start; 
 
    padding: 2px; 
 
    background: grey; 
 
} 
 
.child { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 2px; 
 
}

<div class="container"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 1

"Soluzione"

Io uso la soluzione termine con leggerezza come questa è follemente difficile fare a meno righe fisse come Tomas suggerito (cioè senza alterare il codice HTML a un stile più convenzionale), o in genere senza un alto grado di hacking. Inoltre, l'altezza si dimezza a meno che non ci siano 2 file completate e il div contenente non possa essere ridimensionato in modo affidabile; commenta il bambino 7 e vedi cosa succede. Poi, quando disattivi anche tu, vedi che ritorna a 'normale'.

I have been messing around for an hour or so and the best I can come up with is in this fiddle.

---

mi piacerebbe offrire un po 'di storia

Il valore di default è flex-flowrow nowrap, questo imposta una certa larghezza x sull'elemento la fortuna di ricevere questa regola. Sembra che in questo caso la modifica di flex-flow a columnnon ripristini la larghezza x definita su quell'elemento. L'elemento prende la larghezza x come se fosse flex-flow: row nowrap (provalo tu stesso).

C'è un mucchio di questioni ereditarie larghezza che derivano da questo, non possiamo impostare la proprietà flex-basis (non è destinata a comportarsi in questo modo credo) quindi abbiamo bisogno di avvolgere tutto in un altro elemento .container che possiamo definire la larghezza su e inserire invece gli stili di colonna effettivi su un elemento .row. Tuttavia, .container non si ridurrà. Nella migliore delle ipotesi, la nostra colonna è definita in modo appropriato in larghezza con l'elemento .container (ing) in cui entrambi eseguono le proprie azioni.

Quindi abbiamo bisogno di uno pseudo elemento ::after per fornire lo sfondo con larghezza corretta, inclusi alcuni margin e calc() hack per simulare il riempimento.

Potrei digitare molto di più, ma non penso che questa sia una soluzione praticabile, in realtà solo una "prova" di come non può essere fatto bene.

Se si desidera aggiungere più righe, è necessario modificare la larghezza dal 50% per 2 (1/2), al 33% per 3 (1/3) ecc. Non è così scalabile come modificare l'HTML stesso.

Quindi, per concludere, c'è una demo funzionante solo per 2 righe, ma per ora non sembra plausibile con la struttura attuale del markup HTML.

Answer 2

Lei non ha fissato un comportamento larghezza dell'elemento genitore. Impostare .container visualizzare la proprietà su blocco inline e per ogni .row elemento display aggiuntivo: proprietà flex.

.container { 
 
    display: inline-block; 
 
    max-height: 290px; 
 
    padding: 2px; 
 
    background: grey; 
 
} 
 
.row{ 
 
    display:flex; 
 
} 
 
.child { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 2px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    </div> 
 
</div>