Почему input ужимается, а div расширяет родительский блок?

Question

[unique_nickname]

Есть код:

<div class="parent">
    <input class="child" />
    <div>static content</div>
</div>

.child {
  ...
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.parent {
  display: flex;
  align-items: center;
}

input ведет себя как ожидается


Но если input заменить на div, задав ему тот же класс, т.e. абсолютно те же самые стили, то он раздвинет родительский элемент.


Почему он так себя ведет и как это пофиксить?

Comments

[Stalker_RED]

А стили родительского блока предлагается угадать?

[unique_nickname]

Stalker_RED, Добавил

[ProjectSoft]

unique_nickname, input это не блок... Поэтому и такое поведение.
Задавайте размер, например, в процентах для дочерних элементов.
В вашем случае примерно так

.parent > * {
    width: 50%;
    max-width: 50%;
}

[Stalker_RED]

unique_nickname, с такой разметкой они оба ничего не "раздвигают"

похоже какой-то части истории вы не показываете.