css flexbox: stessa altezza per tutti gli elementi?

Question

Utilizzando CSS e flexbox, non capisco come dare la stessa altezza ai div "a" e "b". Ho bisogno di diventare più alto per abbinare l'altezza di una persona. In altre parole, la scatola grigia dovrebbe essere alta quanto la scatola rossa.

Era a mia conoscenza che era sufficiente impostare flex:1 in entrambi i punti a e b, in modo che potessero avere la stessa altezza. Ma non è così.

Ho provato a impostare flex-basis:0 in "a" e "b", ma il contenuto è troncato. Non riesco a troncare a, ho bisogno di essere ingrandito.

#cont1{ 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 

 
#a{ 
 
    background-color:red; 
 
    flex:1; 
 
} 
 

 
#b{ 
 
    background-color:grey; 
 
    flex:1; 
 
}

<div id="cont1"> 
 
    <div id="a"> 
 
     <h1>title</h1> 
 
     <h1>title</h1> 
 
     <h1>title</h1> 
 
     <h1>title</h1> 
 
     <h1>title</h1> 
 
     <h1>title</h1> 
 
    </div> 
 
    <div id="b"> 
 
     short text 
 
    </div> 
 
</div>

JSFiddle version

Answer 1

Se è possibile sopravvivere a senza flex, il posizionamento può farlo.

#cont1{ 
 
} 
 

 
#a{ 
 
    background-color:red; 
 
    position: relative; 
 
} 
 

 
#b{ 
 
    background-color:grey; 
 
    position: absolute; 
 
    left: 0; top: 100%; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="cont1"> 
 
    <div id="a"> 
 
     <h1> title </h1> 
 
     <h1> title </h1> 
 
     <h1> title title title title title title title title title</h1> 
 
     <div id="b"> 
 
     short text 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

specificare un'altezza per il contenitore flessibile.

Prova questa:

#cont { 
    display: flex; 
    flex-direction: column; 
    height: 400px; 
} 

È necessario creare uno spazio definito per gli elementi Flex per distribuire.

---

UPDATE (sulla base di commenti)

giusto ... ecco cosa ho bisogno per realizzare: http://www.jsfiddle.net/s2b0v4ph (Guarda sul grande schermo perché non v'è un punto di interruzione)

e qui è il problema: se la casella # 2 diventa più alto, l'allineamento è rotto tra la scatola # 2 e la scatola # 5: http://www.jsfiddle.net/s2b0v4ph/1

Il layout funziona perfettamente, come codificato. Gli elementi flessibili del contenitore flessibile primario (.flex-md) allungano l'intera altezza del contenitore. Indipendentemente dal contenuto che aggiungi alla casella n. 1 o n. 2, la colonna contenente le caselle n. 5 e n. 6 sarà uguale all'altezza.

Tutte le colonne nel contenitore flessibile primario (<div class="row flex-md" id="row-quadrati">) sono uguali altezza, indipendentemente dalla quantità di contenuti. http://jsfiddle.net/s2b0v4ph/1/

La ragione per cui la casella n. 5 non è allineata con la casella n. 2 quando il contenuto viene aggiunto è che ciascuna di queste caselle esiste in un diverso flex formatting context. In altre parole, le scatole esistono in diversi contenitori flex.

In particolare, le caselle n. 1, n. 2 e n. 3 sono articoli flessibili di e le caselle n. 4, n. 5 e n. 6 sono articoli flessibili di #quadr-col-2. Sia e #quadr-col-2 è articoli di flessione del contenitore primario flex, raddoppiando come (nested) contenitori flessibili, stessi.

Perché queste caselle presenti in contenitori di flessione separati non v'è alcun motivo per loro di condividere uguale altezza. Se si desidera applicare la caratteristica di uguale altezza flessibile, inserirle tutte nello stesso contenitore flessibile.

Answer 3

Il trucco è questa parte

.xyz { 
    width: 70%; 
    box-shadow: 0 0 30px; 
    text-align:center; 
    -webkit-flex: 9 0 0; 
    flex: 9 0 0; 
} 

http://codepen.io/damianocel/pen/XmxmQE

Ora questi div avranno la stessa altezza, non importa l'altezza pagine complessive.

È questo quello che hai cercato?

Answer 4

ho risolto il problema in JavaScript come segue, ma io sono ancora interessato a una soluzione css:

function computeMaxHeight(els) { 
    var ht = 0; 
    els.forEach(function (el) { 
     var elht = el.height(); 
     if (elht > ht) { 
      ht = elht; 
     } 
    }); 
    return ht; 
} 

function setMinMeight(els) { 
    var maxht = computeMaxHeight(els); 
    //console.log("here resize. maxht = " + maxht); 

    els.forEach(function (el) { 
     el.css('min-height', maxht); 
    }); 

} 

$(document).ready(function() { 

    var els = [$("#non-porre-limiti"), $("#we-love-pagi"), $("#vuoto"), $("#pagiletter"), $("#pagi-focus")]; 

    $(window).on('resize', function() { 
     setMinMeight(els); 

    }); 

    setMinMeight(els); 

}); 

violino: http://jsfiddle.net/s2b0v4ph/3/