Не могу понять css flexbox в этой ситуации [дублировать]

Вы столкнулись с функцией столбцов с одинаковой высотой гибки.

Исходная настройка контейнера flex - align-items: stretch.

Это означает, что элементы гибки автоматически расширяют всю длину поперечной оси контейнера. В контейнере с вертикальным направлением поперечная ось вертикальна (высота).

Самый высокий элемент устанавливает высоту для всех братьев и сестер. Поскольку самый высокий предмет расширяется, его братья и сестры следуют за ним. Следовательно, равная высота для всех элементов.

Чтобы переопределить эту настройку по умолчанию, добавьте align-items: flex-start в контейнер flex:

#container_add_movies {
   display: flex;
   align-items: flex-start;
}

#container_add_movies {
  display: flex;
  align-items: flex-start;       /* NEW */
}

#container_add_movies #feedback {
  width: 20%;
  background-color: green;
  display: block;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

... или align-self: flex-start к элементам flex:

#feedback {
    align-self: flex-start;
    width: 20%;
    background-color: green;
}

 #suggestions {
    align-self: flex-start; 
    width: 20%;
    background-color: yellow;
}

#container_add_movies {
  display: flex;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#feedback {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: green;
}

#suggestions {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

align-items устанавливает значение по умолчанию align-self. С помощью align-self вы можете переопределить значение по умолчанию для отдельных элементов.

Подробнее в спецификации:

8.3. Выравнивание по оси: свойства align-items и align-self

Элементы Flex могут быть выровнены по поперечной оси текущей линии контейнера flex, аналогично justify-content, но в в перпендикулярном направлении.

align-items устанавливает выравнивание по умолчанию для всех элементов гибкого контейнера, включая анонимные элементы гибкости.

align-self позволяет переопределить это выравнивание по умолчанию для отдельных flex.

---

Немного истории

С самого начала CSS существовали две задачи компоновки, которые регулярно расстраивались, озадачивались и раздражали фронт -end разработчиков:

1. Как центрировать вещи, особенно вертикально, и
2. Как создать столбцы с одинаковой высотой (таблицы в сторону)

Сегодня, с появлением flexbox, эти проблемы закончены.

Центрирование вещей никогда не было проще:

#container {
    display: flex;
    justify-content: center;    /* center flex items along the main axis */
    align-items: center;        /* center flex items along the cross axis */
}

Простой. Легко. Эффективное. Сумасшествие закончилось .

В терминах столбцов с одинаковой высотой, flexbox также превосходит: он делает это по умолчанию.

#container {
    display: flex;
    flex-direction: row;        /* not even necessary; default rule */
    align-items: stretch;       /* not even necessary; default rule */
}

align-items: stretch правило говорит, что элементы гибкости должны максимально расширяться вдоль поперечной оси. Следовательно, в контейнере со строкой все элементы могут быть равны по высоте. Больше сумасшествия, прирученного flexbox .

Из одного популярного ответа для столбцов с одинаковой высотой :

Дайте overflow: hidden к контейнеру и большому (и равному) отрицательному маржу и положительному отступу к столбцам. Обратите внимание, что этот метод имеет некоторые проблемы, например.

Теперь это хак!

Маятник теперь начинает качать в другую сторону: Дизайнеры спрашивают как отключить столбцы с одинаковой высотой.