Come impedire ai contenuti di ridimensionare un elemento flessibile?

Question

Uso la CSSbox CSS per creare una griglia reattiva e scalabile. Quando si applica un grafico di Google a uno degli articoli di Flexbox, l'elemento cambia leggermente di dimensioni. Basta gettare la griglia fuori allineamento. Ho messo insieme le seguenti immagini per illustrare il problema.

Flexbox griglia prima di applicare grafico di Google al punto 6:

Flexbox griglia dopo l'applicazione grafico di Google al punto 6:

I carichi griglia Flexbox più veloce di Google grafico, quindi la griglia si carica originariamente correttamente. Tuttavia, quando il grafico viene caricato, l'elemento 6 si espande leggermente, causando l'immagine 2 sopra.

La metà colonna contenitore flessibile ed articolo 6 div sono configurazione in css come segue:

#middlecolumn { 
    width: 75%; 
    height: 100%; 
    display: flex; 
    flex-flow: column; 
    margin: 0.25%; 
} 

#item6_div { 
    flex: 3; 
    margin-top: 0.8vh; 
} 

noti che gli elementi 5 e 7 sono configurazione nello stesso modo in css, con valori di flex1. Cioè l'elemento 6 è 3 volte l'altezza degli articoli 5 e 7. Pertanto, quando l'elemento 6 viene ridimensionato, viene mantenuto il rapporto 3: 1.

C'è qualcosa che mi manca in css per impedire al grafico di Google di ridimensionare il suo oggetto contenitore flexbox?

Answer 1

Quando si dice un elemento flessibile a flex: 3 (punto 6) o flex: 1 (voci 5 & 7), ecco come quella proprietà stenografica scompone:

flex: ? = <flex-grow>, <flex-shrink>, <flex-basis> 

flex: 3 = flex-grow: 3, flex-shrink: 1, flex-basis: 0 

flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0 

In entrambi i casi, il fattore flex-shrink è 1, il che significa che l'oggetto flessibile è ridotto in proporzione.

Per evitare che gli elementi flessibili da contrazione, che possono essere la causa del disallineamento, vorrei cambiare il flex-shrink a 0.

Invece di flex: 3 e flex: 1 prova:

flex: 3 0 0; 
flex: 1 0 0; 

Maggiori dettagli nel FlexBox spec: 7.1.1. Basic Values of flex

---

Ma potresti avere un altro problema. Hai scritto:

Si noti che gli elementi 5 e 7 sono messa a punto allo stesso modo in css, con flex valori di 1. Cioè l'elemento 6 è 3 volte l'altezza degli articoli 5 e 7. Pertanto, quando l'elemento 6 viene ridimensionato, viene mantenuto il rapporto 3: 1.

Questo non è il modo in cui la proprietà flex-grow funziona.

Applicando flex-grow: 3 a un articolo flessibile si sta dicendo di consumare tre volte più spazio disponibile rispetto agli articoli flessibili con flex-grow: 1. Ciò non significa necessariamente che l'articolo 6 sarà tre volte più grande degli articoli 5 e 7.

Scopri di più su come funziona flex-grow qui: flex-grow not sizing flex items as expected

Come metodo di dimensionamento alternativo, si consiglia di utilizzare la proprietà flex-basis. Prova flex: 0 0 60% sull'articolo 6 e sugli articoli 5 e 7.