css flexbox：所有元素的高度相同？

Question

使用 CSS 和 flexbox，我不明白如何给 div "a" 和 "b" 相同的高度。我需要 b 变得更高，以便匹配 a 的高度。换句话说，灰色框应该和红色框一样高。

据我了解，将 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;
}

<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

指定弹性容器的高度。

试试这个：

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

您需要为要分发的 flex 项目创建定义的 space。

更新（基于评论）

right... here's what I need to achieve: http://www.jsfiddle.net/s2b0v4ph (watch on wide screen because there is a breakpoint)

and here is the problem: if the box #2 becomes taller, the alignment is broken between box #2 and box #5: http://www.jsfiddle.net/s2b0v4ph/1

布局完美无缺，与编码一致。主弹性容器 (.flex-md) 的弹性项目正在拉伸容器的整个高度。无论您向框 #1 或框 #2 添加多少内容，包含框 #5 和 #6 的列都将等高。

主弹性容器 (<div class="row flex-md" id="row-quadrati">) 中的所有列高度相等，无论内容数量如何。 http://jsfiddle.net/s2b0v4ph/1/

添加内容时方框 #5 与方框 #2 不对齐的原因是这些方框中的每一个都存在于不同的 flex formatting context 中。换句话说，盒子存在于不同的弹性容器中。

具体来说，方框#1、#2 和#3 是#quadr-col-1 的弹性项目，方框#4、#5 和#6 是#quadr-col-2 的弹性项目。 #quadr-col-1 和 #quadr-col-2 都是主要弹性容器的弹性项目，它们本身是（嵌套的）弹性容器的两倍。

因为这些盒子存在于单独的弹性容器中，所以它们没有理由具有相同的高度。如果你想应用 flex 等高特性，把它们都放在同一个 flex 容器中。

Answer 2

如果你可以 在没有 flex 的情况下生存 ，定位可以做到这一点。

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

诀窍是这部分

.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

现在这些 div 将具有相同的高度，而不管整个页面的高度如何。

这是您要找的吗？

Answer 4

我解决了 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);

});

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

css flexbox：所有元素的高度相同？

css flexbox: same height for all elements?

html

css

flexbox