Tengo tres elementos que estoy tratando de alinear en mi diseño.

Primero, tengo un div para comentarios, y luego una entrada de búsqueda, y luego un elemento div para sugerencias.

Quiero que el primer y el último elemento tengan un ancho del 20% y que la entrada de búsqueda tenga un ancho del 60%. Usando Flexbox logro lo que quiero.

Pero hay una característica que hace crecer todos los divs hasta el elemento más alto. Esto significa que cuando aparecen los resultados de búsqueda, los elementos de sugerencias y comentarios crecen en altura con la división de búsqueda que resulta en un diseño desordenado.

¿Hay algún truco para no hacer crecer los divs con el elemento más alto? Solo haz los divs (#feedback y#suggestions) tienen la altura del contenido en ellos?

#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