Я борелся с этой проблемой, в общем, и никогда не мог найти хорошее общее решение с HTML/CSS. Как это, например, определение необходимых полей для поставщика OIDC/Connect:
, который работает ... почти. Если вы посмотрите на изображение, некоторые из полей шире, чем входная панель, и есть горизонтальная прокрутка. Это связано с тем, что у меня есть ширина, определенная на входных элементах, которые приблизительно представляют их размер относительно других входов в качестве подсказки/сигнала для конечного пользователя относительно того, сколько данных обычно ожидается. (Если я удаляю эти ширины, то все поля являются «автоматическими», и общая форма становится очень узкой с примерно 30 символами для всех входов.) src = "https://i.sstatic.net/yvfmon0w.png"/>
Предположительно, потому что этикетки, плюс заполнения плюс разрыв, плюс ширина поля обновляется что -то большее, чем ширина панели контейнера. ОК, так хорошо, я понимаю. Что я не могу понять, так это то, как ограничить поля меньше их указанной ширины или ширины ячейки сетки, в которой они расположены так, что они не заставляют сетку быть шире, чем панель, которая содержит ее. Ограниченная видоубийтом, заставляйте сетку быть максимальной доступной шириной. Таким образом, контейнер может адаптироваться к ширине его видоубийта, не расширяясь, чтобы быть шире, чем необходимо для его содержимого. Я пробовал все возможные варианты позиции: относительный я могу придумать. В общем, я хочу иметь возможность использовать такие панели во многих местах и при необходимости адаптироваться к доступному пространству. Таким образом, точные этикетки и желаемая ширина поля варьируются от формы к форме, и я не могу просто предварительно рассказать значениям, которые работают для этого конкретного примера. Кроме того, экраны пользователя, шрифты и базовый размер шрифта или увеличение также изменятся.
Подробнее здесь: https://stackoverflow.com/questions/797 ... able-width
