Почему max-width на flex-grow элементе не работает?

Question

[GeKskill]

Есть ли способ ограничить ширину flex-grow элемента, за исключением варианта с прямым указанием его ширины через width: calc( 100% - 300px )?
Этот способ не подходит, потому что 300px величина динамическая.

Набросал пример с проблемой (элемент .overflow-content не реагирует на max-width элемента .overflow-div )

Comments

[Ankhena]

overflow: hidden; для main

[GeKskill]

Ankhena, Спасибо большое, ваше решение тоже помогло. Но не знаю какое из них более оптимальное

[Ankhena]

GeKskill, наверное, с min-width лучше, потому что предсказуемее. В смысле, случайно не обрежется нужное.

[GeKskill]

Ankhena, Спасибо

Answer 1

[Виталий Першин]

main {
  flex-grow: 1;
  min-width: 0;
}

Comments

[GeKskill]

Огромное спасибо! А в спецификациях CSS есть упоминание о таком нюансе или это жизненный опыт? Не очень понятно отчего так срабатывает.

[Виталий Першин]

GeKskill, Пожалуйста. Про спецификацию не знаю, это уже просто опыт.