Предотвратите сжатие CSS3 от измельчения содержимого

Я пытаюсь создать гибкий макет в CSS3 с тремя ящиками, уложенными друг на друга. Ящики являются братьями и сестрами и, следовательно, имеют один и тот же родительский элемент. Высота первого окна должна соответствовать его содержимому. Высота следующих двух полей должна расти, чтобы соответствовать их соответствующему содержимому, пока они не начнут переполнять их родителя. В этом случае они должны сжиматься, чтобы они не переполнялись.

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

Я заранее не знаю содержание, поэтому макет должен быть динамическим. Я хочу решить это только с помощью CSS, если это возможно.

Вот пример проблемы, когда box3 слишком мал:

p {
    margin: 0;
}
.container, .box {
    border: 1px solid black;
}
.box {
    background-color: white;
    margin: 1em;
    overflow: auto;
}
#container {
    background-color: yellow;
    display: flex;
    flex-direction: column;
    height: 15em;
    overflow: auto;
}
#box1 {
    flex: 0 0 auto;
}
#box2 {
}
#box3 {
}

<div id="container" class="container">
    <div id="box1" class="box">
        <p>◼</p>
    </div>
    <div id="box2" class="box">
        <p>◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼</p>
    </div>
    <div id="box3" class="box">
        <p>◼◻◻</p>
        <p>◼◼◻</p>
        <p>◼◼◼</p>
    </div>
</div>