Используйте свойство flex Shorthand
Существует возможность быстрого выбора нескольких свойств гибкости сразу. Свойства flex-grow , flex-shrink и flex-basis можно объединить, используя свойство flex . Например, flex: 1 0 10px; установит элемент для flex-grow: 1; , flex-shrink: 0; , и flex-basis: 10px; , Настройки свойств по умолчанию - flex: 0 1 auto; ,
Добавьте свойство CSS flex и к #box-1 и #box-2 . Дайте #box-1 значения, поэтому его flex-grow равен 2, его flex-shrink равен 2, а его flex-basis - 150 пикселей. Дайте #box-2 значения, поэтому его flex-grow равен 1, его flex-shrink равен 1, а его flex-basis - 150 пикселей. Эти значения приведут к тому, что #box-1 будет расти, чтобы заполнить дополнительное пространство с удвоенной скоростью #box-2 когда контейнер больше 300 пикселей, и с удвоенной скоростью #box-2 когда контейнер меньше 300 пикселей. 300px - это комбинированный размер значений flex-basis двух полей.