Как растянуть input на всю ширину родителя?

Question

Как растянуть input на всю ширину родителя?

Рейтинг: 0Ответов: 1Опубликовано: 25.05.2023

Есть у меня форма и wrapper. Даю wrapper-у display:flex; Даю form-е max-width: 480px; и input-ам даю width:100% но инпуты не растягивается на всю ширину.

<div>
  <form>
    <input type="text" />
    <input type="submit" />
  </form>
</div>

Стили

div {
  display: flex;
  background-color: red;
}

form {
  max-width: 480px;
  background-color: blue;
}

input {
  width: 100%;
}

Можно без flex-grow: 1

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

если вам нужно растянуть input на всю ширину div'а то уберите max-width и используйте используется просто width со значением 100%.

max-width не задает ширину компонента, а указывает на максимальное допустимое значение для него.

div {
  display: flex;
  background-color: red;
}

form {
  width: 100%;
  background-color: blue;
}

input {
  width: 100%;
}

<div>
  <form>
    <input type="text" />
    <input type="submit" />
  </form>
</div>

А если input нужно растянуть на всю ширину form то все у вас работает правильно, просто посмотрите страницу через DevTools в браузере

Как растянуть input на всю ширину родителя?

Ответы