css flexbox: одинаковая высота для всех элементов?

используя CSS и flexbox, я не понимаю, как дать одинаковую высоту divs "a" и "b". Мне нужно, чтобы Б стал выше, чтобы соответствовать росту А. Другими словами, серая коробка должна быть такой же высокой, как и красная.

насколько я понял, этого было достаточно, чтобы установить flex:1 как для a, так и для b, чтобы они имели одинаковую высоту. Но это не так.

Я пытался установить flex-basis:0 как "a", так и "b", но содержание усечено. Я не могу усечь a, мне нужно, чтобы b был увеличенный.

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

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

#b{
    background-color:grey;
    flex:1;
}
html lang-html prettyprint-override"><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

6
css css3 flexbox html

4 ответов

Если вы можете выжить без гибкого трубопровода, располагать может сделать это.

#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>
3

укажите высоту контейнера flex.

попробуйте это:

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

необходимо создать определенное пространство для распределения элементов flex.

обновление (на основании комментариев)

право... вот чего мне нужно достичь:http://www.jsfiddle.net/s2b0v4ph (смотреть на широком экране, потому что есть точка останова)

и вот проблема: если коробка #2 становится выше, юстировка между поле № 2 и поле № 5: http://www.jsfiddle.net/s2b0v4ph/1

макет работает отлично, как закодировано. Элементы flex основного контейнера flex (.flex-md) растягиваются на всю высоту контейнера. Независимо от того, сколько контента вы добавляете в поле #1 или поле #2, столбец, содержащий поля #5 и #6, будет одинаковой высоты.

enter image description here

все столбцы в первичном гибкий контейнер (<div class="row flex-md" id="row-quadrati">) равны по высоте, независимо от количества содержимого. http://jsfiddle.net/s2b0v4ph/1/

причина, по которой поле #5 не совпадает с полем #2 при добавлении содержимого, заключается в том, что каждый из этих ящиков существует в другом контекст форматирования flex. Другими словами, коробки существуют в различных контейнерах flex.

в частности, коробки #1, #2 и #3 являются гибкими элементами #quadr-col-1, и коробки #4, #5 и #6 детали гибкого трубопровода из #quadr-col-2. Оба!--3--> и #quadr-col-2 являются элементами flex основного контейнера flex, которые удваиваются как (вложенные) контейнеры flex.

потому что эти коробки существуют в отдельных контейнерах гибкого трубопровода никакая причина для их делить равную высоту. Если вы хотите применить функцию Flex equal height, поместите их все в один контейнер flex.

2

Я решил проблему в javascript следующим образом, но меня все еще интересует решение 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);

});

скрипка:http://jsfiddle.net/s2b0v4ph/3/

0

фокус в этой части

.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

теперь эти divs будут иметь одинаковую высоту, независимо от общей высоты страниц.

это то, что вы искали?

0