Как я могу разместить текстовые поля на одной строке, сохраняя при этом адаптивную ширину больше, чем ширина браузера по ⇐ Html

[Гость]

Следующий фрагмент представляет собой пример текстовых полей, которые не вызывают переполнения, когда размер области просмотра становится меньше указанной (максимальной) ширины. Это достигается путем запроса каждого на 100 % доступной ширины, но не более определенного предела.

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

.block {
display: block;
}

.w-full {
width: 100%
}

.max-w-80 {
max-width: 20rem;
}

.max-w-20 {
max-width: 5rem;
}

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

First Name


Last Name

Однако, если эти входные данные размещены в одной строке через flexbox, более длинный элемент возвращается к ширине браузера по умолчанию.

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

.block {
display: block;
}

.flex {
display: flex;
}

.w-full {
width: 100%
}

.max-w-80 {
max-width: 20rem;
}

.max-w-20 {
max-width: 5rem;
}

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

First Name


Last Name

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

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

.block {
display: block;
}

.flex {
display: flex;
}

.w-full {
width: 100%
}

.max-w-80 {
max-width: 20rem;
}

.max-w-20 {
max-width: 5rem;
}

.grow {
flex-grow: 1;
}

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

First Name


Last Name

Патч для этого будет заключаться в применении максимальной ширины и к обертке , но это также приведет к тому, что будет ограничен тем же размером. Это проблематично, если метка длиннее текстового поля.

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

.block {
display: block;
}

.flex {
display: flex;
}

.w-full {
width: 100%
}

.max-w-80 {
max-width: 20rem;
}

.max-w-20 {
max-width: 5rem;
}

.grow {
flex-grow: 1;
}

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

First Name


Phone Number

Есть ли способ заставить непосредственных дочерних элементов флексбокса (в данном случае ) вырасти до максимально возможной ширины, но не более максимальной ширины самого длинного элемента, вложенного в него?
Я уверен, что это достижимо с помощью JavaScript, но я надеюсь что существует решение только для CSS/HTML.

Измените, чтобы продемонстрировать предлагаемые решения:

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

  white-space: pre

  — не идеально из-за перекрытия меток.

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

.block {
display: block;
}

.flex {
display: flex;
}

.w-full {
width: 100%
}

.max-w-80 {
max-width: 20rem;
}

.max-w-20 {
max-width: 5rem;
}

.grow {
flex-grow: 1;
}

.whitespace-pre {
white-space: pre;
}

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

Phone Number


First Name

Подробнее: https://stackoverflow.com/questions/799 ... widths-lon