Невозможно заставить контейнер сгибаемой колонны на полную высоту

Question

Есть штучная временная шкала, которая содержит 5 столбцов. Пока что это хорошо. Однако при добавлении дополнительных столбцов они растягиваются из-за переполнения высоты их родительского контейнера.

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

Вот оригинальная демоверсия

Дело в том, что контейнер может содержать более 100 столбцов, поэтому он должен иметь возможность хранить неограниченное количество столбцов.

Вот модифицированная демонстрация с 2 добавленными столбцами.

Я пытался поиграть с высотой, установив 100%, автоматически, но ничего из этого не помогло.

Итак, вопрос в том, почему установка высоты на 100% не работает?

Answer 1

Вы должны адаптировать переменную $ item в вашем css, чтобы она соответствовала вашим фактическим элементам на временной шкале:

$items: 7;

см. Здесь: https://codepen.io/anon/pen/OeoqJq

Answer 2

К сожалению, это не может быть сделано с помощью чистого CSS, поэтому мне пришлось настроить порядок столбцов и высоту контейнера с помощью некоторого JavaScript.Логика взята из исходного исходного файла.

$(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');

});