CODEWITHSUNDEEP
htmlcssflexbox
seguso
seguso

Reputation: 2273

css flexbox: same height for all elements?

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

Upvotes: 7

Views: 23898

Answers (5)

Curious Programmer
Curious Programmer

Reputation: 31

Here is my JS solution to this problem, which selects the tallest of any number of elements and adjusts the height of the other elements accordingly:

let elements = document.querySelectorAll('.element-name');

if (elements) {
    let arr = [];

    let fixHeight = () => {
        for (let i = 0; i < elements.length; ++i) {
            let height = elements[i].offsetHeight;
            arr.push(height);

            var highest = Math.max(...arr);
        }

        elements.forEach((el) => {
            el.style.height = highest + 'px';
        });
    };

    fixHeight();

    window.addEventListener('resize', () => {
        fixHeight();
    });
}

I would be also curious about a neater CSS solution to the problem.

Upvotes: 0

damiano celent
damiano celent

Reputation: 709

The trick is this part

.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

Now these divs will have the same height, no matter the overall pages height.

Is this what you have looked for?

Upvotes: -1

seguso
seguso

Reputation: 2273

I solved the problem in javascript as follows, but I am still interested in a css solution:

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/

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371331

Specify a height for the flex container.

Try this:

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

You need to create a defined space for the flex items to distribute.

UPDATE (based on comments)

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

The layout is working perfectly, as coded. The flex items of the primary flex container (.flex-md) are stretching the full-height of the container. No matter how much content you add to box #1 or box #2, the column containing boxes #5 and #6, will be equal height.

enter image description here

All columns in the primary flex container (<div class="row flex-md" id="row-quadrati">) are equal height, regardless of content quantity. http://jsfiddle.net/s2b0v4ph/1/

The reason that box #5 does not align with box #2 when content is added is that each of those boxes exists in a different flex formatting context. In other words, the boxes exist in different flex containers.

Specifically, boxes #1, #2 and #3 are flex items of #quadr-col-1, and boxes #4, #5 and #6 are flex items of #quadr-col-2. Both #quadr-col-1 and #quadr-col-2 are flex items of the primary flex container, doubling as (nested) flex containers, themselves.

Because these boxes exist in separate flex containers there is no reason for them to share equal height. If you want the flex equal height feature to apply, put them all in the same flex container.

Upvotes: 2

Asons
Asons

Reputation: 87201

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>

Upvotes: 4

Related Questions