"CSS: настройка ширины input по остаточному пространству"

Быстрый ответ

Для реализации такой стилизации элемента input, чтобы он занимал всё оставшееся пространство в контейнере, можно использовать flexbox. Необходимо задать родительскому контейнеру свойство display: flex;, а элементу input – свойство flex: 1;. Таким образом, input сможет растянуться и занять все доступное пространство:

.cozy-container {
  display: flex;
}

.expandable-input {
  flex: 1;
}

<div class="cozy-container">
  <label>Обычный подозреваемый:</label>
  <input type="text" class="expandable-input">
</div>

Такое решение позволяет input приспосабливаться под размеры контейнера.

Ответ для старых браузеров

Несмотря на множество преимуществ flexbox, существуют старые версии браузеров, которые могут требовать альтернативного подхода. В таком случае можно использовать таблицы, задав label и input стиль display: table-cell и контейнеру – стиль display: table;:

.old-school-container {
  display: table;
  width: 100%;
}

.cell-label, .cell-input {
  display: table-cell;
}

.cell-input {
  width: 100%;
}

<div class="old-school-container">
  <label class="cell-label">Праотец всех меток:</label>
  <input type="text" class="cell-input">
</div>

С помощью этого метода можно сохранить пропорциональное соотношение между input и меткой при их взаимодействии.

Управление элементами

Если необходимо поместить рядом с input несколько блоков, например, кнопки, то можно настроить использование свободного пространства с помощью свойств flexbox:

.multi-talented-container {
  display: flex;
}

.flexin-item {
  flex: 0.5; // Займёт половину доступного пространства
  flex: 1;   // Займёт всё оставшееся пространство
  flex: 2;   // Займёт в два раза больше пространства, чем элемент с 'flex: 1'
}

Визуализация

Можно представить элемент input как дикую кошку, располагающуюся на всём свободном участке контейнера:

Контейнер: |--------------------------------------|
До:        | [Input-Леопард]     | [Кнопка "Выход"]           |
После:     | [Растянувшийся Леопард-Input] | [Кнопка "Выход"] |

Теперь вы можете визуализировать, как input, словно джунглевый леопард, занимает всё доступное пространство:

До:      🐆💤 [Спящий Леопард]  🌳.......
После:   🐆☀️ [Леопард, владеющий джунглями] 🌳

Контроль переноса строк

Важно следить за тем, чтобы элементы в flexbox не переносились на новую строку. Для этого используйте свойство flex-wrap со значением nowrap:

.tight-lid-container {
  display: flex;
  flex-wrap: nowrap;
}

Адаптация к изменениям

Если ширина метки вдруг увеличивается, не стоит беспокоиться. Благодаря flexbox, ваш input без труда подстроится под новые условия.

Обеспечение совместимости

Не забывайте о необходимости проверки работы flexbox в различных браузерах и использовании вендорных префиксов, где это необходимо:

.popular-kid-container {
  display: -webkit-flex; /* Для старых версий Safari */
  display: flex;         /* Для современных браузеров */
}

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks — Детальное руководство по созданию адаптивных макетов с использованием flexbox.
2. Основные концепции flexbox – CSS: Cascading Style Sheets | MDN — Обзор основ flexbox от MDN.
3. CSS Flexbox (Flexible Box) — Простой и понятный обучающий материал по работе с CSS Flexbox.
4. Дизайн упрощённых круговых диаграмм на CSS с использованием SVG — Smashing Magazine — Руководство по созданию SVG-визуализаций.
5. CSS Grid Layout – CSS: Cascading Style Sheets | MDN — Погружение в работу с сеточными макетами CSS Grid, мощным инструментом для веб-разработки.
6. Адаптивный веб-дизайн – A List Apart — Детальное руководство по созданию адаптивных веб-дизайнов.