Для того чтобы два flex-блока в React или любом другом фреймворке/языке программирования сжимались одинаково, можно использовать свойство flex-shrink.
Свойство flex-shrink позволяет указать, на сколько блок будет сжиматься в пределах доступного пространства. Значение по умолчанию равно 1, что означает, что блок будет сжиматься в соответствии с другими блоками с таким же значением. Если установить flex-shrink в 0, блок не будет сжиматься.
При использовании flex-контейнера с двумя блоками внутри, можно установить одинаковое значение свойства flex-shrink для обоих блоков.
.flex-container {
display: flex;
}
.flex-item {
flex: 1 1 0; /* значение flex-shrink равно 1 */
}
В приведенном выше примере flex-элементы будут сжиматься одинаково. Если другие flex-элементы в контейнере имеют большее значение flex-shrink, то они будут сжиматься пропорционально, относительно других блоков с таким же значением flex-shrink.
Также можно использовать значения flex-grow и flex-basis, чтобы определить, как будут растягиваться и распределяться блоки внутри flex-контейнера. Значение flex-grow - это фактор, определяющий, насколько блок будет растягиваться, а flex-basis - определяет желаемую ширину блока. Это может быть полезно, если вы хотите контролировать поведение блоков при изменении размеров контейнера.
Обратите внимание, что поддержка flex-свойств может отличаться в зависимости от браузера, поэтому рекомендуется проверять совместимость с различными браузерами и, если необходимо, использовать вендорные префиксы.