0

Есть у меня форма и 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

4
  • Вы хотите невозможного. Ширина родителя зависит от ширины его потомков (потому что вы сделали flex), а вы пытаетесь сделать ширину потомка зависимым от ширины родителя — вполне логично, что от такого замкнутого цикла зависимостей получается что попало
    – andreymal
    25 мая в 17:26
  • max-width: никак невозможно растянуть?
    – Dias
    25 мая в 17:28
  • max-width не предназначен никого никуда растягивать, он просто задаёт максимальную возможную ширину элемента
    – andreymal
    25 мая в 17:28
  • зачем задавать форм max-width: 480px; в пикселях? если он не должен занимать больше какого то места, укажите ему ширину в vw например. типа width: 40vw, где он занимает 40% экрана. инпуты со 100% вместе с ним будут тянуться. на маленькие экраны через медиа другие настройки и готово
    – Maneken
    25 мая в 22:45

1 ответ 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 в браузере

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.