CSS, как рассчитывается max-width в flex контейнере, если один из дочерних элементов имеет flex-grow = 1?
Всем привет, я не супер спец в 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);
Спасибо заранее.
Дополнительно:
.wrapper { min-width: 0; } |
.wrapper { min-width: 0; }
- Офигеть =D.
Будет очень круто если ссылку дадите почему такое работает))Но даже если не дадите сам найду очень интересно, спасибо.
- kosuha, здесь че то есть https://habr.com/ru/articles/329820/
и со ссылкой на спецификацию https://www.w3.org/TR/css-flexbox-1/#min-size-auto
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
При использовании flex контейнеров в CSS, свойство flex-grow определяет, насколько каждый дочерний элемент будет увеличиваться по ширине относительно других дочерних элементов. Если у одного из дочерних элементов задано свойство flex-grow: 1, это означает, что этот элемент будет занимать все доступное пространство в родительском контейнере после того, как остальные элементы займут свое минимальное пространство.
Теперь, когда речь идет о свойстве max-width в контексте flex контейнеров, оно определяет максимальную ширину, которую элемент может занимать. Если установлено значение max-width для дочернего элемента с flex-grow: 1, то этот элемент будет увеличиваться в ширину до тех пор, пока не достигнет своего максимального значения, установленного в max-width. При этом другие дочерние элементы могут занимать оставшееся пространство в контейнере.
Пример использования в PHP:
<div> <div style="flex-grow: 1;max-width: 200px;background-color: red">Element 1</div> <div style="background-color: blue">Element 2</div> </div>
В данном примере первый дочерний элемент будет занимать всё доступное пространство в контейнере из-за свойства flex-grow: 1, но его ширина не будет больше 200px из-за свойства max-width. Второй дочерний элемент займет оставшееся пространство в контейнере.
Таким образом, при использовании свойства max-width в flex контейнерах, элемент с flex-grow: 1 будет увеличиваться в ширину до значения max-width, после чего пространство будет распределено между другими дочерними элементами в соответствии с их настройками flex-grow.