Elemento flex forzato per non crescere in direzione dell'asse trasversale

Question

Sto creando una pagina con un menu verticale utilizzando display: flex;. Voglio che la larghezza del menu si adatti perfettamente ad alcuni pulsanti, senza dover usare una larghezza fissa.

Tuttavia, desidero anche che la casella del menu abbia un messaggio di stato, che può avere un testo piuttosto lungo. Mi piacerebbe che questo status-div avesse la larghezza del menu, senza forzare il contenitore del menu a ingrandirlo. Invece, lo status-div dovrebbe aumentare la sua altezza e avvolgere il testo.

Spiegando a parole è molto difficile, quindi vi suggerisco di verifica questo violino: http://jsfiddle.net/bXL3q/

Nota la differenza quando si imposta .statusmessage-display: none;.

Qualche idea, o è quello che sto cercando di fare non fattibile? ..dovrebbe essere?

---

Quello che ho provato:

• width: 100% fallisce, ovviamente solo assume la larghezza genitore
• width: -webkit-min-content sorta di opere, ma rende l'elemento troppo stretta
• flex-basis e flex-grow influenzare l'altezza dell'elemento e non fare nulla per influenzare la larghezza
• position: absolute sol ho problemi di larghezza, ma ora non ho modo di definire l'altezza dello status-div .. (allo scopo di forzare una barra di scorrimento in finestre con altezza ridotta - invece scorrerà semplicemente sugli elementi del pulsante)

---

body { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    align-items: stretch; 
 
} 
 

 
.page { 
 
    flex-grow: 1; 
 
    background-color: yellow; 
 
} 
 

 
.menu { 
 
    background-color: red; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
.somechildren { 
 
    white-space: nowrap; 
 
    background-color: green; 
 
    border: 1px solid black; 
 
} 
 

 
.menu>* { 
 
    flex-shrink: 0; 
 
} 
 

 
.separate { 
 
    flex-grow: 1; 
 
} 
 

 
.statusmessage { 
 
    background-color: magenta; 
 
    align-self: flex-end; 
 
    /*display: none;*/ 
 
}

<div class=menu> 
 
    <div class=somechildren>I'd like the menu's</div> 
 
    <div class=somechildren>width to fit nicely</div> 
 
    <div class=somechildren>around these children</div> 
 

 
    <div class=separate></div> 
 

 
    <div class=statusmessage> 
 
    While forcing this status message to wrap and grow its height, without affecting the width of the container. 
 
    </div> 
 
</div> 
 
<div class=page> 
 
    The page 
 
</div>

Answer 1

Si erano quasi arrivati ​​con width. Quello che dovete fare è impostare widthemin-width (demo):

.statusmessage { 
width:0; /* Collapses .statusmessage so it doesn't affect column width */ 
min-width:100%; /* Expands .statusmessage to width of column */ 
} 

Il width può essere (e probabilmente dovrebbe essere) impostato su un valore diverso da 0. Dovrebbe essere solo la larghezza minima della colonna o inferiore. Quindi usa un valore che funzioni per te.

L'ho provato su Chrome e Firefox e sembra funzionare in entrambi. Ora, è supposto funzionare? Non sono sicuro, non ho letto fino a the spec tanto (potrebbe essere indefinito). Assicurati di testare in tutti i browser per i quali hai bisogno di lavorare. (Controlla le specifiche per vedere se questo comportamento è indefinito/errato)

Answer 2

width: 0; min-width: 100%; non ha funzionato per me.

Invece, ho impostato

position: relative; 

sul bambino flex e avvolto il suo contenuto in un div interno con

position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 

questo modo si evita il contenuto dal contribuire alle dimensioni del contenitore flessibile mentre ancora corrispondenti al dimensione dell'asse trasversale determinata dal resto dei bambini flessibili.