Как сделать размер flex-элемента по контенту и с указанным flex-grow?

Question

[leeroyjenkins176]

Есть поле и кнопка внутри флекс (или грид) контейнера. Хочу получить следующее поведение:
1) Ширина кнопки равна размеру её контента, все остальное место занимает поле.
2) Как только происходит flex-wrap (ширина поля меньше 500px) - кнопка и поле занимают все доступное место.
Вот пример где все это работает. Но может есть более адекватный способ добиться подобного, не используя огромные значения flex-grow?

Comments

[xdevelx]

Чтобы добиться именно такого поведения нужен только flex-grow: 9999 hack https://www.joren.co/flex-grow-9999-hack/
И как видите достаточно четерех девяток.

[Ankhena]

Вы хотите противоречивого поведения в случае, когда одна строка и когда две, поэтому либо с девятками либо перестраивать через media (но тут надо знать ширину перестроения, с учетом ширины кнопки).