Как сделать два блока внутри блока изменяемыми по высоте до какого-то предела?

Question

Амир @Guedda

Начинающий front-end разработчик

HTML
CSS

Как сделать два блока внутри блока изменяемыми по высоте до какого-то предела?

Добрый день, уважаемые. Опять у меня головоломка с блоками.
Есть главный блок фиксированной высоты (например 500px). Он абсолютно позиционирован. Внутри него два блока, которые заполняются разными данными. У первого блока максимальная высота должна быть 250px, потом появляется прокрутка (именно у первого блока). Второй блок должен занимать всю оставшуюся высоту, и если у второго блока контента больше чем его высота, должна появляться прокрутка у второго блока.
Пример:
Контент первого блока на высоту 100px. Контент второго блока 600px. Первый блок имеет высоту 100px без прокрутки. Второй блок высота 400px с прокруткой не у главного блока, а у второго.

Второй пример:
Контент первого блока на высоту 600 пикселей. Контент второго блока тоже 600px. Первый блок должен иметь высоту 250px с прокруткой у первого блока. Второй блок высота 250px с прокруткой у второго блока.

Пробовал играться с flex, но видимо я его плохо знаю. Если написать так:

.box {
            height: 500px;
            width: 500px;
            display: flex;
            flex-direction: column;
        }

        .first {
            background-color: blue;
            max-height: 250px;
        }

        .second {
            background-color: red;
            flex-grow: 1;
        }

<div class="box">
            <div class="first">
                First
            </div>
            <div class="second">
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
                Second<br />
            </div>
        </div>

Но тогда второй блок игнорирует height главного блока, а если добавить к первому и второму блоку overflow: auto, то первый блок "схлопывается" практически до 0 пикселей.
Помогите пожалуйста. Возможно ли это сделать только средствами css, не прибегая к JS?