Входные данные HTML игнорируют свойство CSS flex-basis

Почему-то инпуты не правильно воспринимают flex-базу. Вот простейший пример, показывающий, как входные данные не подчиняются и выходят за пределы своего родительского блока (см. jsfiddle):

<div>
    <input>
    <input>
</div>

<style>     
    div { display: flex; width: 200px; border: 2px solid red; }
    input { flex-basis: 50%; }
</style>

Вот другой, более подробный случай.

Что за черт? :)


html css flexbox html-input
person 1234ru    schedule 11.10.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

div {
  display: flex;
  width: 200px;
  border: 2px solid red;
}

input {
  flex-basis: 50%;
  min-width: 0; /* ADDED */
}
<div>
  <input>
  <input>
</div>

person kukkuz    schedule 11.10.2017
comment
Это работает. Благодарю вас! - person 1234ru; 11.10.2017