Почему не сужается flex-элемент с flex-shrink: 1?

Question

[Илья Бондаренко]

Подскажите, по какой такой причине flex элемент в данном случае не сужается до появления скролла? При уменьшении разрешения два flex-элемента становятся в плотную и страница больше не респонсится.

Вот такая ситуация:


Понимаю что вероятно мешает внутренний контент flex-элемента, но почему он мешает сужению не понимаю - ведь я проставил flex-shrink: 1 Разве не должно быть ему все равно что там внутри?

Буду рад если подскажите как решить проблему, скажите что почитать, чтобы пробел в знаниях заполнить. Сейчас даже не понимаю как эта ситуация называется и как искать в интернете. Спасибо

Comments

[Алексей Уколов]

flex элемент не сужается

Зелёный или синий?
Синий вложен в красный?

Если бы вы сделали интерактивный пример и подробнее объяснили суть проблемы, было бы проще вам помочь.

[Илья Бондаренко]

Алексей Уколов, Да, пару секунд, понял что не удобно. Уже делаю на codepen

[Ankhena]

Разве не должно быть ему все равно что там внутри?

Нет, ему не всё равно.
Если указана минимальная ширина, то он не сожмется меньше её.
Аналогично с чем-нибудь типа white-space nowrap.

С виду кажется, что у вас там лишние обертки.

[Илья Бондаренко]

Алексей Уколов, пока переписывал пример нашёл корень проблемы, но почему так происходит мне до конца не понятно.

Суть проблемы в том, что у breadcrumbs не появляется скролл при сужении экрана, а появляется скролл у страницы, так как не происходит сужения блока breadcrumbs (Извините, что сразу не написал понятно).

Оказалось что родительский контейнер, в котором лежала шапка и breadcrumbs был сам флекс элементом и имел свойство flex-grow: 1; Поэтому он был на всю ширину экрана. Этот контейнер является флекс элементом из-за того, что при уменьшении размера экрана другие флекс элементы были скрыты. Изначально, перед сужением экрана выглядело всё так:



Так вот если родительский элемент является флекс элементом и у него стоит flex-grow: 1, то почему-то скролл при сужении не появлялся у breadcrumbs. Вот я сделал имитацию этого поведения для наглядности: https://codepen.io/ilya_frontender/pen/VwNqbMx

Если в этом примере для container задать width: 100%, то всё заработает как нужно. Для меня было не явно что поведение контейнера при flex-grow: 1 и width: 100% - разное. Почему так - не понимаю

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

Илья Бондаренко, я тут накидал тоже решение
https://codepen.io/tstwqsqh-the-looper/pen/LYvMgXd

Знаю что max-width на многое влияет в плане расчета флексбокса, я и сам до конца не разбирался.
но наверное чтото подобное вы хотели получить

[Илья Бондаренко]

Евгений Косухин, спасибо. Однако очень интересно узнать причины такого поведения и объяснение, не люблю магию)))
Можете написать ответом, отмечу решением

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

Илья Бондаренко, А вот возмжоно еще поиграть с min-width какнибудь
Я и сам задавал вопросы на эту тему вот
CSS, как рассчитывается max-width в flex контейнере, если один из дочерних элементов имеет flex-grow = 1?

Там поищете "min-width имеет значение"
https://habr.com/ru/articles/329820/

Там как раз описан случай почему flex-shink не работает и ссылки я просил =)