Как сделать так, чтобы элемент ввода учитывал размеры контейнера сетки? - PullRequest
Новая
       7

Как сделать так, чтобы элемент ввода учитывал размеры контейнера сетки?

3 голосов
/ 11 июня 2019

У меня есть элемент input внутри контейнера сетки CSS.Контейнер должен иметь ширину 100 пикселей, при этом элемент input занимает большую часть пространства, а other-thing - оставшиеся 24 пикселя.Я использую grid-template-columns для этого.

Это прекрасно работает, если я сделаю родительский контейнер 200px вместо 100px:

enter image description here

.container {
  grid-template-columns: 1fr 24px;
  grid-template-rows: 1fr;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 200px; /* Try 100px */
  background-color: red;
}

И следующий HTML 

<div class="container">
  <input value="hello"/>
  <div class="other-thing">
    x
  </div>
</div>

Но если я сделаю контейнер шириной 100 пикселей, входные данные внезапно откажутся сжиматься - поэтому он перекрывает красный контейнер.

enter image description here

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

Вот jsfiddle

Как заставить input использовать только оставшееся пространство в контейнере, предпочтительно используя grid-template-columns?

Ответы [ 2 ]

4 голосов
/ 11 июня 2019 

.container {
  display: grid;
  grid-template-columns: 1fr 24px;
  width: 100px;
  background-color: red;
}

input {
  min-width: 0;
}
<div class="container">
  <input value="hello" />
  <div class="other-thing">
    x
  </div>
</div>
3 голосов
/ 11 июня 2019

Основная проблема, с визуальной точки зрения, заключается в justify-content: center.

Поскольку ваш контейнер установлен на width: 100px, элемент сетки будет центрироваться горизонтально в этом пространстве, переполняя контейнер в равной степени с обеих сторон.,Это приводит к тому, что левая сторона исчезает за пределами экрана и становится полностью недоступной (даже с помощью прокрутки).

enter image description here

(для полного объясненияо таком поведении см .: Невозможно прокрутить к вершине гибкого элемента, который переполняет контейнер )

При переключении на width: 200px контейнеру достаточно места дляприспособить элементы сетки, чтобы переполнение не происходило.

enter image description here

Самое быстрое и простое решение этой проблемы - удалить justify-content: center.В любом случае это бессмысленно, потому что контейнер меньше, чем контент, и вы не можете центрировать контент без свободного места в контейнере.Так что justify-content ничего не делает.

enter image description here

Если вы хотите, чтобы все элементы сетки помещались внутри контейнера, добавьте min-width: 0 кinput элемент.Это позволяет input сжиматься ниже размера его содержимого и min-width: auto по умолчанию.

enter image description here

(для полного объясненияо таком поведении см. Запрет содержимого от расширения элементов сетки ) 

.container {
  grid-template-columns: 1fr 24px;
  display: grid;
  width: 100px;
  border: 2px dashed red;
}

input {
  min-width: 0;
}
<div class="container">
  <input value="hello" />
  <div class="other-thing">x</div>
</div>

Обратите внимание, что ширина по умолчанию и минимальная ширина элементов input раньше было легко увидеть с помощью инструментов инспектора Chrome / Firefox.Похоже, это больше не так.Я не смог найти настройки в стилях агента пользователя.Мы должны посмотреть на вычисленные значения для руководства или просто предположить, что есть настройки ширины и минимальной ширины.

...