Если у вас есть два элемента flex и один из них не уменьшается, а другой уменьшается, вам может потребоваться использовать дополнительные стили, чтобы решить эту проблему.
Прежде всего, убедитесь, что оба элемента имеют одинаковую ширину или гибкость (flex). Если у одного из элементов задана жесткая ширина, например, "width: 200px;", а у другого не задана, это может быть причиной их разного поведения.
Для того чтобы оба элемента одинаково уменьшались, вы можете использовать свойство flex-grow. Оно определяет, каким образом оставшееся пространство будет распределено между гибкими элементами. По умолчанию, значение flex-grow равно 0, что означает, что элемент не будет увеличиваться.
Вы можете установить одинаковое значение flex-grow для обоих элементов, например, "flex-grow: 1;", чтобы они равномерно растягивались. Если вам нужно, чтобы один элемент был менее гибким, чем другой, вы можете установить для него меньшее значение flex-grow или, даже, установить его равным нулю, чтобы элемент не увеличивался.
Если заданное значение flex-grow не работает или не дает нужный результат, вы также можете попробовать использовать свойство flex-shrink. Оно определяет, каким образом гибкий элемент будет уменьшаться, когда его контейнер становится меньше. По умолчанию, значение flex-shrink равно 1, что означает, что элемент будет уменьшаться пропорционально остальным элементам с таким же свойством.
Вы можете установить разные значения flex-shrink для каждого элемента, чтобы один элемент уменьшался быстрее или медленнее, чем другой, в зависимости от ваших потребностей. Например, если вы хотите, чтобы один элемент уменьшался меньше, вы можете установить для него меньшее значение flex-shrink или даже установить его равным нулю, чтобы элемент не уменьшался.
Кроме того, вы можете использовать свойство flex-basis, чтобы задать начальную ширину элемента. По умолчанию, значение flex-basis равно "auto", что означает, что элемент будет занимать свою максимальную ширину. Вы можете установить значение flex-basis в любое другое значение, чтобы изменить начальную ширину элемента.
И наконец, не забудьте, что все эти свойства должны применяться к контейнеру, а не к самим элементам внутри него. Вы должны иметь элемент-контейнер с заданным свойством display: flex;, чтобы использовать все эти возможности гибкого макета.
Надеюсь, что эти рекомендации помогут вам решить вашу проблему с флекс-элементами в HTML и разобраться в способах уменьшения и распределения пространства между ними.