Flex 1 css что это?

Flex: 1 является сокращением сразу для трех свойств flex-элемента. В распространенной браузерной обработке это flex-grow: 1, flex-shrink: 1 и flex-basis: 0%. Первое разрешает рост, второе сжатие, а третье задает базу расчета. Поэтому запись не означает прямое присваивание половины ширины двум детям и не относится к приоритету элемента при нажатии или рисовании. При одинаковых условиях два элемента часто действительно делят доступное место поровну. Но условия могут отличаться: внутренние отступы, рамки, минимальные размеры и содержимое участвуют в расчете. Длинный непрерывный адрес нередко удерживает автоматический минимальный размер и мешает одной коробке уменьшиться. Для строки с текстовыми колонками можно рассмотреть min-width: 0 на flex-элементе и отдельно настроить overflow-wrap для адреса. Если текст необходимо сокращать, это тоже отдельное оформление, а не автоматическое следствие flex: 1. Не меняйте overflow на hidden только ради одинаковых размеров, если так пропадет важная часть информации. Есть и тонкость нулевой базы: процентный ноль и длина ноль не всегда одинаковы при неопределенном размере контейнера по главной оси. Поэтому в сложных вертикальных раскладках полезно явно задавать нужную полную запись и проверять итоговые размеры. Для вашего обычного ряда начните с измерения контейнера, проверки min-width и удаления случайных фиксированных ограничений. Затем сравните размеры при коротком и длинном адресе. Flex: 1 удобно выражает гибкое распределение, но не отменяет остальные правила CSS.