Почему flexitem растягивается на всю ширину экрана в данном случае?

Question

[Александр Косицын]

ссылка на страничку гитхаб чтобы легче было в инспекторе посмотреть:
https://alexanderkositsyn.github.io/about_page/app...
ссылка на фотку проблемы(при помощи моноснап):
https://monosnap.com/file/4jc9c12vZkiaj6X4USI2YBeh...

Comments

[Ankhena]

Потому что 100%

[Александр Косицын]

Ankhena, не очень понял, что 100%?

[Ankhena]

Александр Косицын, ширина блока main 100% - он ее и занял.
А вы бы сколько хотели?

[Александр Косицын]

Ankhena, take.ms/SpaLm
извините, не вижу 100%.
main - это flexitem. он должен по идее занимать место по своему содержимому, а не на всю ширину растягиваться

[Александр]

Насколько я понимаю он является флекс элементом, и должен занимать ширину по контенту если не указано другое, а оно как раз не указано.

[Александр Косицын]

Александр, это ответ? ваша логика верна. но в таком случае он должен растягиваться по содержимому, но он почему то тянется на всю ширину родителя или кого то еще

[Ankhena]

Александр Косицын, у него стоит display:flex и он хочет занимать 100% ширины, поскольку flex-wrap: wrap не мешает ему перенестись на новую строку и занять эту самую ширину, он именно так и поступает.
Блочные элементы растягиваются на ширину родителя.

[Александр]

Александр Косицын, это был не вам ответ :)

[Александр]

Ankhena, flex-wrap:wrap только и делает что разрешает перенос на другую строку если элементы не вмещаются на данной строке, но ни коим образом не увеличивает ширину элемента, не путайте с flex-grow.

[Александр Косицын]

Ankhena, в таком случае любой бы flexcontainer перепрыгивал на новую строку при flex-wrap:wrap. Если удалить текст комментария внутри этого блока, то он переместиться наверх, на туже строчку что и панель навигации. Т е даже являясь flexcontainerom элемент main не перескакивает на другую строку даже с flexwrap:wrap.

В edge все работает хорошо на ссылке которая в топике вопроса.

[Александр Косицын]

Ankhena, насколько я знаю flexitem может являться и flexcontainer, и при этом не переноситься на другую строку с правилом flex-wrap: wrap

[Ankhena]

Александр Косицын, значит, надо налить чаю и начать смотреть сначала

[Ankhena]

Александр Косицын, я там выше спрашивала какую ширину вы желаете.

Если удалить часть абзацев так, чтобы не осталось полосы прокрутки - все будет хорошо.
Также хорошо будет, если задать для p ширину 380px.

Дальше я бы разбиралась с полосой прокрутки.

[Александр Косицын]

Ankhena, вы правы, так можно. можно и flex-basis поставить, но по мне это как пальцем в небо. А если потом надо будет сузить для адаптива или чего то еще и все полетит. Уже долго сижу не могу понять проблему, и в интернете ничего не пишут по этому поводу.

[Александр Косицын]

Ankhena, насчет ширины. Я бы хотел чтобы блок main показывал в devtools что он не занимает все место, а растягивается по содержимому. Нужно чтобы main блок встал на одну строчку с панелью навигации.

[Ankhena]

Александр Косицын, я и говорю, что дальше стала бы разбираться с прокруткой. Поскольку, когда ее нет, блок встает правильно.

[Ankhena]

Александр Косицын, а wrap тогда зачем указываете?

[Александр Косицын]

Ankhena, насчет прокрутки посмотрю. Но мне кажется дело не в ней.
Wrap стоит чтобы если элемент шире по контенту он показал мне съехав на другую строку, а то так он за пределы может вылезти без flex-srink.

[Александр Косицын]

Ankhena, я могу предположить свой вариант. Зная что текст в flexitem не переносится на другую строку, т е текст идет в одну строку, можно уменьшить текст до величины одной строки и все сработает. Мои догадки: текст как то влияет на flexitem изнутри блоков.
вот наглядно:
take.ms/sVSRG

Решение с удалением тега p не исправляется проблему:
take.ms/D7fRN

[Ankhena]

Александр Косицын,

Зная что текст в flexitem не переносится на другую строку, т е текст идет в одну строку

не поняла, о чем это вы?

[Ankhena]

Александр Косицын, хм, интересно

а результат при этом разный

Всегда пишу через width и в основном в процентах, а тут оказывается чудеса такие удивительные.

[Александр]

Вообщем не понятно почему, но если для <p> указать max-width:440px то все встает куда надо, хотя по отладчику у параграфов и так ширина всего 380...

[Александр Косицын]

Ankhena,

Зная что текст в flexitem не переносится на другую строку, т е текст идет в одну строку

https://jsfiddle.net/p01a0u84/
постарался показать что текст без жестких размеров не переходит на новую строку. ну обычное блочное поведение.
take.ms/42whI

[Александр]

Получается, хоть родитель и ограничивает ширину блока, параграфы плевать хотели на его ограничения... Нелогичное поведение :(

[Ankhena]

Александр Косицын, это не блочное поведение, это свойства текста.
блок занимает всю ширину родителя
текст занимает всю ширину родителя
блок закончится и строчка перенесется

Дело в расчете ширины флекс-детей. Если мы второму блоку зададим flex: 1, то он займет все доступное оставшееся пространство.
А вот почему браузеры считают по разному, надо пойти почитать чего-нибудь.

Answer 1

[j n]

Это вызвано неправильным использованием сокращенной записи flex.

Попробуй вместо "flex: 0 0 220px" на блоке аватара и "flex: 0 0 380px" на блоке "Обо мне" использовать width: 220px и width: 380px соответственно. Заодно рекомендую вообще изучить, что означают значения в сокращенной записи flex - например, здесь

Comments

[Александр Косицын]

Не понял, что не правильного в моей записи? Я задал flex-basis т е базовый размер, от него и пляшем. fLex grow 0 значит даже если есть свободное место, то расти не будет. И flex shrink, при уменьшении свободного места сохранять свою ширину.

Расшифруйте пожалуйста почему в данном случае нужно использовать width вместо flex? Ведь flex специально создан чтобы регулировать размер элемента не через width, max-width и min-width.