Can't force flex column container to full height

Question

There's a boxed timeline that contains 5 columns. So far it renders fine. However, when adding more columns it becomes stretched due to height overflow of their parent container.

<section id="timeline">
    <div class="demo-card-wrapper">
        <div class="demo-card demo-card--step1">
            <div class="head">
                <div class="number-box">
                    <span>01</span>
                </div>
                <h2><span class="small">Subtitle</span> Technology</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step2">
            <div class="head">
                <div class="number-box">
                    <span>02</span>
                </div>
                <h2><span class="small">Subtitle</span> Confidence</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step3">
            <div class="head">
                <div class="number-box">
                    <span>03</span>
                </div>
                <h2><span class="small">Subtitle</span> Adaptation</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step4">
            <div class="head">
                <div class="number-box">
                    <span>04</span>
                </div>
                <h2><span class="small">Subtitle</span> Consistency</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step5">
            <div class="head">
                <div class="number-box">
                    <span>05</span>
                </div>
                <h2><span class="small">Subtitle</span> Conversion</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>

        <div class="demo-card demo-card--step6"> <!-- Added this -->
            <div class="head">
                <div class="number-box">
                    <span>05</span>
                </div>
                <h2><span class="small">Subtitle</span> Conversion</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>    


        <div class="demo-card demo-card--step7"> <!-- And this  -->
            <div class="head">
                <div class="number-box">
                    <span>05</span>
                </div>
                <h2><span class="small">Subtitle</span> Conversion</h2>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
                <img src="http://placehold.it/1000x500" alt="Graphic">
            </div>
        </div>    
    </div>
</section>

Here's the original demo

The thing is that the container might contain more than 100 columns, so it must be able to store an unlimited number of columns.

Here's the modified demo with 2 added columns.

I've tried to play with height by setting it 100%, auto, but none of that helped.

So the question is, why setting a height to 100% doesn't work?

I'm seeing a width problem, not a height problem. Can you clarify? — Michael Benjamin, Jul 06 '19 at 14:56
@Michael_B The width problem is caused by height overflow of the initial parent container — Yang, Jul 06 '19 at 14:57
Maybe. But you should take a look at this post for a known `column wrap` problem: https://stackoverflow.com/q/33891709/3597276 — Michael Benjamin, Jul 06 '19 at 14:58

score 1 · Answer 1 · answered Jul 06 '19 at 15:07

1

You have to adapt the $item variable in your css to match your actual items in the timeline:

$items: 7;

see here: https://codepen.io/anon/pen/OeoqJq

answered Jul 06 '19 at 15:07

trias

635
7
10

Thanks. But as I mentioned in the original post, there might an unlimited number of items, so it must be able to handle new items dynamically. – Yang Jul 06 '19 at 15:09
your need javascript for that. just to the calculation in javascript then. – trias Jul 06 '19 at 15:10

score 0 · Accepted Answer · answered Jul 06 '19 at 16:27

Unfortunately, this can't be done via pure CSS, so I had to tweak column orders and container height via some JavaScript. The logic has been taken from the original source file.

$(function(){

    var items = $(".demo-card").length;
    var rows = Math.ceil(items / 2);
    var counter = items - rows + 2;
    var y = counter;

    // Count column order
    for (i = 0; i < counter; i++) {
        var odd = (i + 1) * 2  - 1 ;
        var even = (i + 1) * 2;

        $(`.demo-card:nth-child(${odd})`).css('order', i + 1);
        $(`.demo-card:nth-child(${even})`).css('order', y);

        y++;
    }

    // Count container height
    var stagger = 180;
    var cardHeight = 450;
    var outerMargin = 90;
    var containerHeight = rows * (cardHeight + outerMargin) + stagger;

    $(".demo-card-wrapper").css('height', containerHeight + 'px');

});

Can't force flex column container to full height

2 Answers2