Сжатие flexbox не работает должным образом с текстовым содержимым ⇐ CSS

[Anonymous]

Я создал простой макет с двумя гибкими контейнерами.

Оба имеют неявное значение flex-shrink: 1, как и должно быть значение по умолчанию.
Итак, я ожидаем, что flex-shrink уменьшит содержимое, которое «переполняет» общий размер.
Однако это не работает, и оба моих контейнера переполняют родительский:

Код: Выделить всё

Tests1

Tests2

Tests3

Tests4

Tests5

Test1

Test2

Test3

Test4

Test5

Test6

Test7

Test8

Test9

Test10

Test11

Test12

Test13

Это перо, которое демонстрирует это.
Если бы у меня был только контейнер определенной высоты, кроме текстового содержимого, весь пример работал бы как и предполагалось.
Почему «текстовому» контенту разрешено увеличивать мой контент, даже если он должен «сжимать» его?

Подробнее здесь: https://stackoverflow.com/questions/791 ... xt-content