Адаптивный ввод + кнопка с сеткой или флексбоксом (без медиа-запросов) ⇐ CSS

[Anonymous]

У меня возникли проблемы с некоторым распределением CSS с использованием флексбокса или макета сетки, вот в чем дело:
У меня есть контейнер со следующим расположением (75% ввода, 25% кнопки) :


Это расположение должно быть основным в рабочий стол и большие экраны.
Однако просьба состоит в том, чтобы, как только контейнер достигнет ширины мобильного устройства, контейнер должен изменить пропорцию элементов (50% ввода, 50% кнопки):


Этого можно легко достичь с помощью медиа-запросов, но просьба использовать только Grid CSS или flexbox (или и то, и другое, что угодно, кроме медиа-запросов)
Вот простой HTML и CSS некоторых попыток

Код: Выделить всё

    





Document




Button

CSS 1 (первая попытка, flexbox):

Код: Выделить всё

    * {
box-sizing: border-box; /* Include padding and borders in width calculations */
}

.container {
display: flex;
width: 100%; /* Full width of the parent */
}

.input {
flex-grow: 1;      /* Input can grow to fill space */
flex-shrink: 1;    /* Input can shrink */
flex-basis: 75%;   /* Start at 75% width */
min-width: 50%;    /* Minimum width is 50% */
}

.button {
flex-grow: 0;      /* Button does not grow */
flex-shrink: 1;    /* Button can shrink */
flex-basis: 25%;   /* Start at 25% width */
min-width: 25%;    /* Minimum width is 25% */
max-width: 50%;    /* Maximum width is 50% */
}

CSS 2 (вторая попытка, использование сетки CSS):

Код: Выделить всё

    * {
box-sizing: border-box; /* Include padding and borders in width calculations */
}

.container {
display: grid;
grid-template-columns: 75% 25%; /* Initial layout for desktop */
width: 100%; /* Full width of the parent */
}

.input {
min-width: 50%; /* Input can shrink to a minimum of 50% */
}

.button {
min-width: 25%; /* Button maintains a minimum width of 25% */
}

Дело в том, что пропорции остаются от 75% до 25% (75% ввод, 25% кнопка) на настольных компьютерах И мобильных устройствах (не меняются при уменьшении экрана или на 50%). - 50% для настольных компьютеров и мобильных устройств (не растягивается при переходе на рабочий стол, но невозможно добиться обоих вариантов поведения на экранах разных размеров с помощью только одной реализации кода.
Мой вопрос: достижима ли эта проблема с простой сеткой CSS и/или flexbox или это достижимо только с помощью медиа-запросов?
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/791 ... ia-queries