Forcing content in columns to be the same height over several breakpoints

Question

I have a bootstrap layout like this:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div>
                This block should be the same height as the right column.
                The content in this block is in a scrollable container.
                The scrollable container currently has a fixed height set to allow scrolling.
            </div>
        </div>
        <div class="col-sm-6"></div>
            <div>Block 1 content</div>
            <div>Block 2 content</div>
    </div>
</div>

Currently on desktop the layout looks like this:

When I switch to smaller screen size breakpoints the layout changes to this:

I would like the scrollable area to take on the same height as the two content blocks on the right. I have tried using display: flex on the row but it displays the entire content of the scrollable area if I remove the specified height from it, which is not what I want.

I basically want the right column dictate the height for the left column.

At the moment I'm using JavaScript to do the resizing but ideally I would like to do this in CSS if possible.

JsFiddle: https://jsfiddle.net/b12ybxpm/

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

I basically want the right column to dictate the height for the left column.

Try adding this:

.row {
     display: flex;
}

.left-column,
.right-column {
     display: flex;
     flex-direction: column;
}

.left-column > *,
.right-column > * {
     flex: 1;
}

By adding display: flex to .row, the children (flex items) of .row – left column and right column – will automatically have equal heights.

However, the children of the flex items – in this case, the scrollable content and content blocks – are not flex items, and have no reason to stretch to fill their container.

Hence, apply display: flex to the parents, which then converts the children into flex items, and by default they stretch to fill their container.

Since it appears you're working in a column direction, give each child a flex: 1, so they know to stretch in that direction.

UPDATE (revision based on new code posted in question)

The code posted in your fiddle is somewhat complex, considering all the nested divs.

With all these nested divs, there's a good chance my code above will not work, as it's based on the images you posted (not the actual code posted later).

In order to achieve equal heights in the demo using flexbox (no JS required), you'll need to make each nested div a flex container.

Here's your demo, revised: https://jsfiddle.net/b12ybxpm/4/

edited May 23 '17 at 12:07

Community

1
1

answered Jan 18 '16 at 00:00

Michael Benjamin

346,931
104
581
701

Hi Michael, I have added the additional display:flex but I still have the problem that the content in the left column grows until it fits everything in the scroll-list when I remove the fixed height. – b3n Jan 18 '16 at 00:16
Are you able to post the full code? Or provide a live demo or site to view? – Michael Benjamin Jan 18 '16 at 00:18
Added link to JsFiddle. – b3n Jan 18 '16 at 00:26
What's the height of `.row` supposed to be? – Michael Benjamin Jan 18 '16 at 01:37
The .row height should be whatever the content in right column is. – b3n Jan 18 '16 at 02:03
1

Thanks, this works great! Apologies for the misleading images. – b3n Jan 18 '16 at 02:29
You're welcome. Glad I could help. Also, you may want to consider restoring the images to your question. Your images provide a good illustration of the problem. My answer provides a generic solution. This general Q&A may be useful to future visitors. – Michael Benjamin Jan 18 '16 at 02:46
1

Done, restored the images. – b3n Jan 18 '16 at 02:55

Forcing content in columns to be the same height over several breakpoints

1 Answers1