Нужно комментировать, поскольку я не смог проверить этот ответ, но недостаточно репутации в этом аккаунте.
Я нашел эту ветку отчета об ошибках Chromium относительно этой проблемы.
Кто-то рекомендовал в этом потоке установить min-height: 0 для контейнера или max-height: 100% для дочерних элементов, что решило бы проблему переполнения.
Для справки в будущем и для других пользователей приведена скрипта, воспроизводящая проблему, скопированная из цепочки отчетов об ошибках Chromium.
#container {
width: 200px;
height: 200px;
border: 1px solid black;
}
.box {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 0.1);
}
<div id="container">
<div class="box">
<div>
Box 1
</div>
<div class="box">
<div class="box">
Box 2 (Nested)
</div>
</div>
</div>
</div>