У меня есть три элемента, которые я пытаюсь выровнять в моем макете.

Сначала у меня есть div для обратной связи, затем ввод для поиска, а затем элемент div для предложений.

Я хочу, чтобы первый и последний элемент имели ширину 20%, а ввод для поиска - 60%. Используя Flexbox, я добиваюсь того, чего хочу.

Но есть функция, которая превращает все div в самый высокий элемент, Это означает, что когда всплывают результаты поиска, элементы обратной связи и предложения увеличиваются по высоте, а поисковый элемент приводит к неправильному макету.

Есть ли хитрость, чтобы не увеличивать div с самым высоким элементом? Просто сделай дивы (#feedback а также#suggestions) есть высота содержания в них?

#container_add_movies {
  display: flex;
}
#container_add_movies #feedback {
  width: 20%;
  background-color: green;
}
#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>

http://codepen.io/alucardu/pen/PPjRzY