Specificare valori crescenti in formato crossbox

Question

Esiste un meccanismo per specificare le proprietà di stile flex- * per il layout sull'asse trasversale di un flexbox?

Ho un layout costituito da due scatole allineate orizzontalmente con larghezze minime in una scatola flessibile di larghezza variabile. Quando il contenitore diventa troppo piccolo per contenere le due scatole, la casella destra si avvolge sul fondo del contenitore. La casella di sinistra rimane di una certa dimensione fino a quando si verifica l'avvolgimento, a quel punto cresce per riempire la larghezza del contenitore. Ho raggiunto questo con il seguente CSS:

#container { 
    display: flex; 
    flex-flow: row wrap; 
    align-items: stretch; 
} 

#left { 
    flex: 1 0 200px; 
} 

#right { 
    flex: 1000 0 200px; 
} 

Impostando una base di 200px e uno strizzacervelli di 0, questo dà la casella a sinistra una larghezza minima di 200px, e impostando un valore piccolo crescere contro la massiccia uno nella casella di destra, la casella di destra riempirà lo spazio rimanente e quello di sinistra non cambierà sostanzialmente di dimensioni. Sistemo i numeri in questo modo perché quando il contenitore è più piccolo di 400 px la casella di destra si avvolge attorno alla metà inferiore del contenitore, a quel punto il valore di crescita della casella di sinistra è incontestato e aumenta fino alle dimensioni del contenitore.

Il problema è con le dimensioni risultanti sull'asse trasversale. Se la casella di destra si riempie di contenuti, inizia a traboccare il contenitore, quando ne ho bisogno per iniziare a scorrere invece. Il meglio che sembro essere in grado di fare qui è impostare un overflow-y sul contenitore, che fa scorrere l'intero contenitore, inclusa la casella di sinistra. L'impostazione di un'altezza massima del 100% è ancora relativa all'intera altezza del contenitore e l'impostazione di qualsiasi altro valore di altezza influisce sull'altezza della scatola quando non è avvolta, dove è necessario che torni anche a tutta la lunghezza.

È possibile visualizzare l'effetto su this fiddle. Quando il contenitore è inferiore a 400 px, la casella blu si avvolge. La casella blu ha un'altezza minima di 200 px, quindi soddisfa quella e quindi le due caselle si allungano per riempire l'altezza verticale rimanente. Ma quando si fa clic su abbastanza, la casella blu inizia a traboccare e non può essere contenuta da un overflow-y perché non c'è un valore di altezza definitivo su di esso.

Essenzialmente quello che voglio è gli stessi valori nelle impostazioni flessibili, ma per l'asse trasversale:

#left { 
    cross: 1000 0 auto; 
} 

#right { 
    cross: 1 0 200px; 
} 

In questo modo entrambi hanno tratto per riempire lo spazio in verticale quando non c'è l'involucro, ma quando si verifica l'involucro la casella a destra ha un'altezza di 200 px e la casella a sinistra occupa lo spazio verticale rimanente. C'è un modo per ottenere questo effetto, dato che la proprietà di cui sopra non esiste?

Answer 1

Come sapete, si desidera un altro comportamento quando inferiore a 400 px si potrebbe semplicemente utilizzare un tag media per modificare la direzione del flusso flessibile. Quindi è possibile utilizzare la proprietà flex ordinaria per impostare i valori.

@media (max-width: 399px) { 
    body { 
    flex-direction: column; 
    } 

    #left { 
    cross: 1000 0 auto; 
    } 

    #right { 
    cross: 1 0 200px; 
    overflow: auto; 
    } 
} 

non imparentati con questa risposta, ma un buon aiuto quando si tratta di problemi Flexbox e domande su quali proprietà flex che esiste è "una guida completa a Flexbox" Bu CSS-Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/