Почему вход перекрывает кнопку? ⇐ Html

[Anonymous]

Я не знаю, почему входная коробка превосходит свой контейнер и перекрывается на кнопку, даже если ширина составляет 100%. Я бы хотел, чтобы входной коробс был прямо рядом с кнопкой без пробела между ней, в то время как ширина входного ящика такая же, как и его контейнер. < /P>




Practice


.parent{
display: flex;
flex-direction: row;
}

.child-1{
flex: 1;
}

.input-box{
width: 100%;
}

.child-2{
width: 100px;
}







Click me




< /code>
Я попытался установить ширину на 99%, но это вызывает небольшой разрыв, и добавление любых границ к входной коробке вообще не перемещает и не изменяет размер входной коробки. Кроме того, превращение входного элемента на что -то другое, например кнопка, исправляет проблему. Я не знаю, какое свойство или код входного элемента вызывает это?

Подробнее здесь: https://stackoverflow.com/questions/796 ... the-button