CSS的Flexbox：所有元素相同的高度？ [英] css flexbox: same height for all elements?

问题描述

使用CSS和flexbox，我不知道如何给div和b一样的高度。我需要b变得更高，以匹配身高。换句话说，灰色的盒子应该和红色的盒子一样高。

据我所知，只要将 flex：1 设定为a和b就足够了他们有相同的高度。但是事实并非如此。

我尝试将 flex-basis：0 设置为a和 b，但内容被截断。我不能截断一个，我需要b被放大。

＃cont1 {display：flex; flex-direction：column;}＃a {background-color：red; flex：1;}＃b {background-color：gray; flex：1;}

< div id =cont1 > < div id =a> < H1>标题< / H1> < H1>标题< / H1> < H1>标题< / H1> < H1>标题< / H1> < H1>标题< / H1> < H1>标题< / H1> < / DIV> < div id =b>短文本< / div>

a href =https://jsfiddle.net/wothbd5z/ =noreferrer> JSFiddle版本 解决方案

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

＃cont1 {}＃a {background -红色; position：relative;}＃b {background-color：gray;位置：绝对;左：0;顶部：100％;宽度：100％;

 < div id = CONT1\" > < div id =a> < H1>标题< / h1> < H1>标题< / h1> < H1>标题标题标题标题标题标题标题标题标题< / h1> < div id =b>短文本< / div> < / div>< / div>  

Using CSS and flexbox, I don't understand how to give the same height to divs "a" and "b". I need b to become taller so as to match a's height. In other words, the grey box should be as tall as the red box.

It was my understanding that it was enough to set flex:1 to both a and b, in order for them to have same height. But it is not so.

I tried to set flex-basis:0 to both "a" and "b", but the content is truncated. I cannot truncate a, I need b to be enlarged.

#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

解决方案

If you can survive without flex, positioning can do this.

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

这篇关于CSS的Flexbox：所有元素相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！