Сделайте контейнер flex, label — несжимаемым по содержимому, input — растягиваемым с min-width: 0. Последнее позволяет полю действительно ужиматься в узком контейнере.
Адаптивный блок: label фиксирует ширину по содержимому, а input заполняет оставшееся пространство
Сделайте контейнер flex, label — несжимаемым по содержимому, input — растягиваемым с min-width: 0. Последнее позволяет полю действительно ужиматься в узком контейнере.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Необходимо создать разметку, в которой метка (label) занимает ровно столько места, сколько требуется её тексту, а поле ввода (input) растягивается, заполняя всю оставшуюся ширину контейнера. Оба элемента должны находиться в одной строке.
|--------------|
|label ________|
| ________label|
|long label ___|
|--------------|
Ответ
Сделайте контейнер flex, label — несжимаемым по содержимому, input — растягиваемым с min-width: 0. Последнее позволяет полю действительно ужиматься в узком контейнере.
<div class="field-row"><label for="name">Имя</label><input id="name"></div>
.field-row { display: flex; align-items: center; gap: .5rem; }
.field-row label { flex: 0 0 auto; white-space: nowrap; }
.field-row input { flex: 1 1 0; min-width: 0; box-sizing: border-box; }
Ширина label соответствует тексту, а остаток занимает input. Для строки с подписью справа можно поменять порядок элементов, сохранив связь for/id. Если сама длинная метка шире контейнера, одновременное выполнение всех условий невозможно: нужно разрешить перенос, обрезку или другую мобильную компоновку.