CSS, как рассчитывается max-width в flex контейнере, если один из дочерних элементов имеет flex-grow = 1?

Question

[Евгений Косухин]

Всем привет, я не супер спец в CSS, поэтому залип с пониманием.
вот пример на кодпэн.
https://codepen.io/tstwqsqh-the-looper/pen/GRPJWwb

Хочу чтобы внутри класса child можно было без
проблем задать элемент (класс problem) любой ширины
и чтобы child спокойно сделал overflow.

Но при таком макете если убрать из .wrapper свойство max-width: calc(100% - 216px);
то мы получим что problem своей шириной растягивает весь макет.



Вопрос в том как сделать так чтобы правильно посчиталась ширина от
.outer-wrapper у которого max-width: 1000px;
И чтобы не писать жесткое правило на .wrapper с значением max-width: calc(100% - 216px);

Спасибо заранее.

Answer 1

[iBird Rose]

.wrapper {
    min-width: 0;
}

Comments

[Евгений Косухин]

Офигеть =D.
Будет очень круто если ссылку дадите почему такое работает))

Но даже если не дадите сам найду очень интересно, спасибо.

[iBird Rose]

kosuha, здесь че то есть https://habr.com/ru/articles/329820/
и со ссылкой на спецификацию https://www.w3.org/TR/css-flexbox-1/#min-size-auto