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

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

我的理解是，为了使a和b具有相同的高度，将flex:1设置为a和b就足够了。但事实并非如此

我试图将flex-basis:0设置为“a”和“b”，但内容被截断。我不能截断a，我需要放大b

#续1{
显示器：flex；
弯曲方向：立柱；
}
#a{
背景色：红色；
弹性：1；
}
#b{
背景颜色：灰色；
弹性：1；
}

标题
标题
标题
标题
标题
标题
短文

指定flex容器的高度

试试这个：

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

您需要为要分发的flex项创建一个已定义的空间

---

更新（基于评论）

对。。。以下是我需要达到的目标：（看 在宽屏幕上，因为存在断点）

问题是：如果盒子2变得更高，那么对齐 在方框2和方框5之间断开：

按照编码，布局工作正常。主flex容器（

.flex md

）的flex项正在拉伸容器的整个高度。无论向框1或框2添加多少内容，包含框5和框6的列的高度都是相等的

主flex容器（

）中的所有列高度相等，而不考虑内容数量

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

具体而言，方框1、2和3是

#quadr-col-1

的弹性项，方框4、5和6是

#quadr-col-2

的弹性项。

#quadr-col-1

和

#quadr-col-2

都是主flex容器的flex项，它们本身兼作（嵌套）flex容器

因为这些盒子存在于单独的flex容器中，所以它们没有理由共享相同的高度。如果您希望应用flex等高功能，请将它们全部放在同一个flex容器中。

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

#续1{
}
#a{
背景色：红色；
位置：相对位置；
}
#b{
背景颜色：灰色；
位置：绝对位置；
左：0；顶：100%；
宽度：100%；
身高：100%；
}

标题
标题
标题标题标题标题
短文

关键在于这一部分

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

现在，这些div将具有相同的高度，无论页面的总体高度如何

---

这就是您所寻找的吗？

我用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:

有一个例子，但使用javascript：（…谢谢，但这违背了使用flexbox的目的。我不知道高度，因为它取决于浏览器窗口的宽度。当我缩小窗口时，文本会换行，容器的高度会增加。这并没有违背flexbox的目的。

flex grow

和

flex shrink

通过在e flex容器。flex容器的高度是多少？如果不知道有多少空间，flex如何分配空间？flex可以简单地给容器一个最小高度，使a和b具有相同的高度…我不确定我是否在跟随你。也许你可以在你的问题中提供更多细节，或者在im之前/之后添加年龄。是的，这可能需要对您的代码进行一些基本的重组。我不使用引导，这就是为什么我没有亲自尝试这样做的原因；我不确定我是否能够提供最有效的解决方案。今晚工作后我将再次看一看，但我希望灰色框尽可能大，以匹配红色框的高度，但不要更多。在您的代码中，高度：100vh起作用，但会使箱子高于所需高度。