Вертикальная линия div исчезает, если содержащий элемент имеет автоматический размер

Question

Я использую загрузчик со следующим html:

<div class="container-fluid h-100">
    <div class="row align-items-center h-100">
        <div class="col-md" align="center">
            <h2>Login</h2>
            <form>
                <table>
                    <tbody>
                    </tbody>
                </table>
                <button type="submit">Login</button>
            </form>
        </div>
        <div class="col-md-auto h-100 d-none d-md-flex">
            <div class="vertical_divider"></div>
        </div>
        <div class="col-md" align="center">
            <a href="/users/signup/"><div class="signup_button"><p>Signup</p></div></a>
        </div>
    </div>
</div>

Со следующими соответствующими css:

.page_content {
    border: 3px solid orange;
    border-radius: 20px;
    padding: 30px;
    height: 75vh; #Changing this to 'auto' makes the vertical divider disappear
    max-height: 75vh;
    overflow-y: scroll;
}

.vertical_divider {
    position: relative;
    height: 100%;
    width: 0;
    border: none;
    border-right: 3px solid $bordercolour;
}

Скрипка: https://jsfiddle.net/aq9Laaew/176561/

Это делает div, который всегда составляет 75% от высоты области просмотра, независимо от его содержимого. Это отлично работает.

Я хочу изменить его так, чтобы div был настолько большим, насколько его содержимое, максимум до 75vh. Если содержимое больше этого, переполнение должно прокручиваться внутри div. Я сделал это, изменив атрибут height класса page_content на auto. Это работает, за исключением того, что центральная оранжевая линия исчезает (это происходит и на скрипке, если вы измените настройку).

Почему это происходит? h-100 должен сделать столбец, содержащий вертикальный разделитель, 100% строки, и все же это не так. Я пытался создавать различные стили !important, но это не имело никакого значения.

Answer 1

Почему это происходит?

Поскольку процентная высота работает только тогда, когда родительский элемент имеет заданную высоту, за исключением тега html. Если для .page_content height установлено значение auto, то для родительского элемента делителя больше не устанавливается высота, поэтому процентная высота ничего не делает.

Чтобы это работало, вы должны либо убедиться, что цепочка родительских элементов полностью, пока html не будет иметь заданную высоту (т.е. не auto). Или в качестве альтернативного решения, если ваш средний столбец не имеет другого назначения, кроме разделительной линии, весь столбец является бессмысленным, поскольку вы можете просто создать линию в виде границы CSS одного из двух других столбцов.