max-width в flex контейнере рассчитывается исходя из нескольких факторов, включая значения flex-grow и flex-shrink у дочерних элементов.
В контексте вашего вопроса, когда один из дочерних элементов имеет свойство flex-grow установленное на 1, это означает, что этот элемент будет растягиваться, чтобы заполнить доступное пространство внутри контейнера. Однако, свойство max-width задает максимальную ширину для элемента, и если указанное значение превышает максимальную ширину, элемент будет уменьшен до максимального значения.
Важно отметить, что max-width применяется только к элементам, которые имеют ширину, определенную в процентах, em или rem. Если ширина элемента задана в пикселях, max-width не будет иметь никакого эффекта.
Таким образом, если у вас есть flex-элемент с flex-grow: 1 и max-width: 500px, этот элемент будет растягиваться до максимально возможной ширины внутри контейнера, но не будет превышать 500 пикселей. Если доступное пространство в контейнере больше, чем 500 пикселей, элемент будет растягиваться до максимального значения 500 пикселей.
В конечном счете, свойство max-width влияет на ширину элемента в flex контейнере при условии, что элементу разрешено растягиваться с помощью свойств flex-grow или flex-shrink. Если элемент не имеет возможности растягиваться или сжиматься, max-width не будет иметь эффекта.