.container {
    min-height: 800px;
    display: flex;
    border: 8px solid #000;
    gap: 10px;
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    background: #0071ff;
    font-size: 40px;
    flex-grow: 1;
}

#box-1 {
    /* flex-grow - которое задает коэффициент расширения флекс-элемента

       Принимает только числа (например, 0, 1, 2 и т.д.).

       flex-grow: 0. Значение по умолчанию — 0 (элемент не растет).

       Если всем элементам задать flex-grow: 1, они равномерно распределят все свободное
       пространство контейнера между собой.

       Если одному элементу задать flex-grow: 2, а остальным 1, то при растягивании этот
       элемент заберет вдвое больше свободного места.

    */
    flex-grow: 5;
}